line-height

The line-height property is used to set the height of the line box of an element. It sets the distance between two adjacent lines’ baselines.

In other words, it is used to set the amount of space above and below inline elements—elements that have <a href="http://tympanus.net/codrops/css_reference/display">display</a>: inline and <a href="http://tympanus.net/codrops/css_reference/display">display</a>: inline-block. The difference between the content height and the specified line-height is called the “leading”.

The line-height property is widely used to set the leading of lines of text. If the line-height value is greater than the value of the font-size of an element, the difference between the value of the line height and the value of the font size is the leading of text. The leading is cut in half (producing a “half-leading”) and distributed on the top and bottom of the inline content, so an inline element is centered within the line box (unless the alignment is changed using the vertical-align property).

If the value of the line-height property is smaller than the value of the font-size, text may overflow the element, and text on one line may overlap text on another line above or below it.

It is often convenient to set the value of the line-height in the font shorthand property. To do that, please refer to the font property entry for more information.

The line-height property can take a keyword value (normal), or it can be set using numbers, lengths, or percentage values. See the Values section below for more information on how each value is computed.

When it takes a number value, it is said to have a “unitless” value, which is usually preferred over unit values. The line-height cascades, and therefore descendants of the element will inherit the computed value from their parent, and this computed value may not be suitable for the font size applied to them, and you may end up with unexpected behavior..

For example, if your element has a font-size set to 16px, with a line-height of 120%. The computed line height value is (16px * 120)/100 = 19.2px. If the element contains a child element with a font size 24px, the line height inherited by the child will be 19.2px, which is very small for a font size of 24px, and hence, as we mentioned earlier, text from one line will overlap text from another line (see the demo section below for a live example). If the element had a unitless line height, the child would inherit the line height value itself, and not the computed value from its parent, and therefore its line height value would be computed based on its own font size, not that of its parent. So, in our example, if the parent had a line-height: 1.2, its child would inherit the line-height value 1.2, which will be multiplied by its 24px font size to calculate the space between the lines of text&mdhas;no text will overflow or overlap.

So, as a general recommendation it is always preferrable to use unitless line heights, because otherwise you may end up having to override values over and over again down the source tree.

Trivia & Notes

When the line-height property is applied to replaced inline elements (such as images, buttons, input fields, textareas, and select objects), it should have no effect according to the CSS specification. Some browsers, nonetheless, do allow it to have an effect on these kinds of elements.

If the line-height property is applied to non-replaced inline elements (such as spans), it specifies the height that is used in the calculation of the line box height.

If the line-height property is used on a block-level element whose content is composed of inline-level elements, it specifies the minimal height of line boxes within the element. The minimum height consists of a minimum height above the baseline and a minimum depth below it.