line-height (CSS property)

Spec
Inherited Initial Version
Yes normal CSS1, 2
Browser support (more…)
IE8+ FF1.5+ SA1.3+ OP9.2+ CH2+
Full Full Full Full Full

Syntax

line-height: { length | number | percentage | normal | inherit } ;

Description

This property sets the line height, providing an indirect means to specify the leading or half-leading.

The leading is the difference between the content height and the (used) value of line-height. Half the leading is known as the half-leading—an old typographic term.

Glyphs (the visual representations of a character) are centered vertically within an inline box. If the line height is larger than the content height, half the difference—the half-leading—is added as space at the top; the same amount is also added at the bottom.

When it’s set on a block-level element, a table cell, a table caption, or an inline block that consists solely of inline boxes, this property specifies the minimal height of descendant line boxes.

When set on a non-replaced inline element, it specifies the height used to calculate the height of the surrounding line box.

See Formatting Concepts for more information about block and inline formatting.

Example

This style rule sets the default line height in an HTML document to 1.5:

html {
  line-height: 1.5;
}

Value

A specified length value will be the computed value for this property, and will be used in the calculation of the final height for the line box. Negative length values are illegal.

A number value is used as a multiplier in the calculation of the value used for this property, which equals the specified number multiplied by the element’s computed font size. Child elements will inherit the specified value, not the resulting used value for this property. Negative values are illegal.

A percentage is used as a multiplier in the same way as a number value—the computed value for the property equals the specified percentage value of the element’s computed font size. However, child elements will inherit the computed value for the property, not the specified percentage value. Again, negative values are illegal.

normal is the normal line height, which depends on the user agent. In this case, it’s the specified value, normal, rather than the resulting used value for the property, which will be inherited by child elements.

As you can see, the way the value is specified has great implications for the inheritance of line height by child elements. A unitless number is inherited as specified, so the declaration line-height: 2; will make child elements double-spaced even if their font sizes are different from the parent’s. For a length or percentage, however, the value is first computed as an absolute value, then this absolute value is inherited. This means that child elements will have the same absolute line height as their parents, regardless of their font sizes.

Compatibility

Internet Explorer Firefox Safari Opera Chrome
5.5 6.0 7.0 8.0 1.0 1.5 2.0 3.0 3.5 1.3 2.0 3.1 4.0 9.2 9.5 10.0 2.0
Buggy Buggy Buggy Full Buggy Full Full Full Full Full Full Full Full Full Full Full Full

Internet Explorer for Windows versions up to and including 7 will use the wrong line height if the line box contains a replaced inline element, such as an image or a form control. The line height will shrink-wrap to the intrinsic height of the replaced element, and will also collapse with the half-leading of adjacent line boxes.

Firefox versions up to 1.0.0.8 do not handle number values correctly, but will use a computed value that’s too large. This is especially noticeable on Macintosh systems.

Internet Explorer for Windows versions up to and including 7 don’t support the value inherit.

User-contributed notes

Related Products