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