B.45. height

This property sets the height of the contents of a block or replaced^[6] element. This height does not include padding, borders, or margins.

^[6] A replaced element is any element whose appearance and dimensions are defined by an external resource. Examples include images (img tags), plug-ins (object tags), and form fields (input and select tags). Another way to think of replaced elements is any element that can be displayed inline with text and that acts as a single, big character for the purposes of wrapping and layout.

If the contents of a block require more vertical space than the height you assign, the behavior is defined by the overflow property.

Inherited: No

See also: Section B.67max-height, Section B.67min-height, Section B.77overflow, Section B.126width

B.45.1. Value

Any CSS length value, a percentage of the parent element's height, or auto.

Initial value: auto

B.45.2. Compatibility

CSS Version: 1

This property is supported in some form by all CSS-compatible browsers. Current, standards-compliant browsers (Netscape 6, Opera 7, Mozilla, Internet Explorer 5 for Mac) support it fully.

Internet Explorer for Windows (up to and including version 6.0) incorrectly includes padding, borders, and margins in the height value. This is known as the box model bug . IE 6.0 corrects this in standards-compliant mode, but for all previous versions you'll need to use a separate, browser-specific style sheet or live with smaller boxes whenever borders, margins, or padding come into play (which is almost always). A third alternative is commonly known as the box model hack , and exploits a more obscure bug in IE6's CSS support to work around the box model bug.

In Internet Explorer 4, this property is supported only for a limited subset of block elements (div is a safe bet).

In Netscape 4, this property is only really supported for images and absolute-positioned elements.

B.45.3. Example

This style rule assigns a fixed height of 100 pixels to paragraphs within the element with ID blurbs.

#blurbs p {
  height: 100px;
}