CSS Property - Line Height

Value: normal | <number> | <length> | <percentage>
Initial: normal
Applies to: all elements
Inherited: yes
Percentage values: relative to the font size of the element itself

The CSS property "line-height" sets the distance between two adjacent lines baselines.

When a numerical value is specified, the line height is given by the font size of the current element multiplied with the numerical value. This differs from a percentage value in the way it inherits: when a numerical value is specified, child elements will inherit the factor itself, not the resultant value (as is the case with percentage and other units).

Negative values are not allowed.

The three rules in the example below have the same resultant line height:

Example:

A value of "normal" sets the "line-height" to a reasonable value for the element"s font. It is suggested that UAs set the "normal" value to be a number in the range of 1.0 to 1.2.

The height of lines

All elements have a "line-height" property that, in principle, gives the total height of a line of text. Space is added above and below the text of the line to arrive at that line height. For example, if the text is 12pt high and "line-height" is set to "14pt", an extra space of 2pt is added, namely 1pt above and 1pt below the line. Empty elements influence these calculations just like elements with content.

The difference between the font size and the "line-height" is called the leading. Half the leading is called the half-leading. After formatting, each line will form a rectangular line-box.

If a line of text contains sections with different "line-height" values (because there are inline elements on the line), then each of those sections has its own half-leading above and below. The height of the line-box is from the top of the highest section to the bottom of the lowest one. Note that the top and bottom do not necessarily correspond to the tallest element, since elements can be positioned vertically with the "vertical-align" property. To form a paragraph, each line-box is stacked immediately below the previous line.

Note that any padding, border or margin above and below non-replaced inline elements does not influence the height of the line. In other words: if the "line-height" is too small for the chosen padding or border, it will overlap with text on other lines.

Replaced elements (e.g. images) on the line can make the line-box bigger, if the top of the replaced element (i.e., including all of its padding, border and margin) is above the tallest text section, or if the bottom is below the lowest.

In the normal case, when there is only one value of "line-height" throughout a paragraph, and no tall images, the definition above will ensure that baselines of successive lines are exactly "line-height" apart. This is important when columns of text in different fonts have to be aligned, for example in a table.

Note that this doesn"t preclude the text on two adjacent lines from overlapping each other. The "line-height" may be smaller than the height of the text, in which case the leading will be negative. This is useful if you know that the text will contain no descenders (e.g., because it only contains uppercase), so the lines can be put closer together.