CSS GUIDE HEIGHT

From CDOT Wiki
Jump to: navigation, search

Summary

This property specifies the height of an element's rendering box for block-level and replaced elements (for other types of elements, height calculations are taken from their inherited or assigned 'line-height' value.)

  • Initial value: depends on user agent
  • Applies to: All except inline non-replaced elements, table columns, and table column groups
  • Inherited: no
  • Percentages: N/A
  • Media: visual
  • Computed value: as specified

Syntax

Ext/Doc: element { height: value; }
In-Line: <img STYLE="height: value;" SRC="image.jpg">

Legal Values

inherit

  • Explicitly sets the value of this property to that of the parent.

auto

  • The height is determinant on the values of other properties.

length

  • Refers to an absolute measurement for the computed element box height. Negative values are not allowed.

percentage

  • Refers to a percentage of the height of the containing element block. If a height is not explicitly given for the containing block, it should be treated like 'auto'.

Mozilla Recommended Values

Usage Examples

Ext/Doc: img.class1 { height: 75px; }
In-Line: <img STYLE="height: 75px;" SRC="image.jpg">

Notes

  • If an element's computed height is greater than that specified by the 'height' property, the content will overflow the rendering box according to the 'overflow' property. Negative values for the 'height' property are not allowed.
  • In addition to the 'height' property, two other properties - 'min-height' and 'max-height' - place constraints on the allowed value for an element's rendering box height. The 'height' value is first computed without consideration for these other two properties. If the computed value is greater than the 'max-height' value or less than the 'min-height' value, the height is re-calculated using the 'max-height' or 'min-height' as the new 'height' value.

Specification Conformance

  • CSS1 Conformance: Browsers may ignore this property (eg: treat it as if set to "auto") for non-replaced elements.
  • CSS2 states that the vertical dimensions for absolutely positioned elements should be equal to the sum of the values of these properties for the element: 'top' + 'margin-top' + 'border-top-width' + 'padding-top' + 'height' + 'padding-bottom' + 'border-bottom-width' + 'margin-bottom' + 'bottom'

Browser Compatibility

See Also