CSS GUIDE HEIGHT
Contents
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'
