Height

height Support Key: [*CSS1\|CSS2\|CSS2.1] [IE4\|N6\|O3.5*\|S1]	Other Dimension Properties
	width min-width max-width	line-height min-height max-height
= Index DOT Css by Brian Wilson =

Main Index | Property Index | CSS Support History | Browser History

Quick Statistics
Default Value:		auto
Applicable Elements:		All except inline non-replaced elements, table columns, and table column groups
Inherit From Parent:		No
Applicable Media:		Visual
HTML Equivalent:		HEIGHT attribute used in tables and replaced elements.
Official Docs:		CSS1: Sect. 5.5.24 CSS2: Sect. 10.5, CSS2.1: Sect 10.5

What is it?: 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.)

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.

Allowed Values
inherit
[CSS2|CSS2.1] [N6|O4|S1]: Type: Explicit; Description:
Explicitly sets the value of this property to that of the parent.
auto
[CSS1|CSS2|CSS2.1] [IE4|N6|O3.5|S1]: Type: Explicit; Description:
The height is determinant on the values of other properties.
[length]
[CSS1|CSS2|CSS2.1] [IE4|N6|O3.5|S1]: Type: Explicit; Description:
Refers to an absolute measurement for the computed element box height. Negative values are not allowed.
[percentage]
[CSS2|CSS2.1] [IE4|N6|O3.5|S1]: Type: Calculated; Description:
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'.

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

Notes

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 Peculiarities

Internet Explorer

4.0:
- This property does not apply to inline elements, input type=checkbox|radio elements, list structures (ol, ul, dl) and list sub-items (li, dt, dd.)
- This property is supported for the DIV element, but not for other block structures.
- This property does not apply to input type=password|text fields
4.0+:
- If the specified height for an element is larger than necessary, the extra blank space will be placed at the bottom of the element. If it is less than the minimum height ncessary to normally render the element, the height property will be ignored.
- If this property is applied to table structures, it is only applied if the specified height is greater than sum of the total table row height minimums needed for each row to render correctly. Any extra height is distributed evenly in the table rows.
5.0:
- This property now applies to inline elements, list structures (ol, ul, dl) and list sub-items (li, dt, dd.)
- This property now applies to form password and text fields (input type=password|text.) The height is applied within the text box, with extra height added at the bottom of the box.
- This property now applies to form checkbox and radio buttons (input type=checkbox|radio.) These controls have an intrinsic height, so the extra width is added as padding around the field.
- Applying this property to an OL list structure turns the markers into bullets.
- Applying this property to an OL list item resets the counter.
- Applying this property to an UL/OL list structure makes the 'list-style-type' into "bullet", and the 'list-style-position' is set to "inside", not "outside."
- This property can now be applied to text fields, but the height is applied within the form field.
Opera

3.5:
- This property has no effect on inline elements, form fields or tables.
- If only one dimension is given for an image, the other dimension is calculated such that the image has the same height/width proportions as the original image.
- If the specified height for an element is larger than necessary, the extra blank space will be placed at the bottom of the element.