Difference between revisions of "CSS GUIDE HEIGHT"

From CDOT Wiki
Jump to: navigation, search
(No difference)

Revision as of 13:03, 24 November 2006

This document is a work in progress and is subject to change.

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'

Browser Compatibility

See Also