line-height (CSS property)

Tweet

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.

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.

Learn HTML5 Online

Get all SitePoint books and courses with a Learnable membership. Start building future-proof websites that are faster, more powerful, and easier to maintain.

No Reader comments