Difference between revisions of "CSS GUIDE HEIGHT"
| Line 51: | Line 51: | ||
* 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' | * 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' | ||
| + | |||
| + | * [http://www.w3.org/TR/REC-CSS2/visudet.html#propdef-height CSS 2] | ||
| + | * [http://www.w3.org/TR/CSS21/visudet.html#the-height-property CSS 2.1] | ||
== Browser Compatibility == | == Browser Compatibility == | ||
| Line 56: | Line 59: | ||
== See Also == | == See Also == | ||
| − | |||
| − | |||
| − | |||
* [http://www.blooberry.com/indexdot/css/properties/dimension/height.htm Blooberry Height Property] | * [http://www.blooberry.com/indexdot/css/properties/dimension/height.htm Blooberry Height Property] | ||
Revision as of 13:07, 24 November 2006
This document is a work in progress and is subject to change.
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
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; width: 75px }
In-Line: <img STYLE="height: 75px; width: 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'
