B.58. line-height

By default, the browser will determine the amount of vertical space allocated to a line by simply taking the tallest element (or font). The line-height property is what is used in this process, and setting it lets you artificially increase, decrease, or arbitrarily set the line height for an element. If more than one element appears on a line, the one with the highest line-height property still determines the rendered height of the line.

Inherited: Yes, but see below for differences in inheritance rules based on the value format.

See also: Section B.37font and Section B.39font-size

B.58.1. Value

This property supports any of the following formats for its value:

normal

This constant is the initial value of this property, and is equivalent to a number setting somewhere between 1.0 and 1.2, according to the CSS2 specification.

number

A number (e.g. 1.5), which is multiplied by the font size to get the rendered height of the line. A setting of 1.0 will crowd the lines together as closely as possible without overlapping characters, while a setting of 1.2 will leave a more natural amount of space between the lines. The value inherited by child elements will be this number, not the resultant line height, so a child element with a larger font will leave a proportionally larger space between lines.

length

A CSS absolute length (e.g. 50px). A setting in ems will look the same as a number setting with the same face value, but child elements will inherit the actual line height, rather than the proportion of the font size.

percentage

A percentage, which is multiplied by the font size, to obtain the displayed line height. As with a setting in ems, the rendered line height may be proportional to the font size, but child elements inherit the absolute height, rather than the relative percentage.

Initial value: normal

B.58.2. Compatibility

CSS Version: 1

Supported by all CSS-compatible browsers, including Netscape 4 or later, Internet Explorer 4 or later, and Mozilla browsers.

B.58.3. Example

This style rule sets all elements of class spacy to have line height one and a half times the font size:

.spacy {
  line-height: 1.5;
}

Because a number value is used, child elements will also have line heights 1.5 times their font sizes. If a value of 150% or 1.5em was used here, child elements would instead have the same line height as this element.