CSS Reference Property

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 display: inline and display: 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.

Official Syntax

  • Syntax:

    line-height: normal | <number> | <length> | <percentage> | inherit
  • Initial: normal
  • Applies To: all elements
  • Animatable: yes, as a number and/or as a length

Values

normal
The value normal is browser-dependant. According to the spec, the browser should set the used value to a “reasonable” value based on the font of the element. The value has the same meaning as <number>. It is recommended that the value for normal be between 1.0 to 1.2. Desktop browsers usually use a default value of roughly 1.2, depending on the element’s font-family.
<number>
A unitless <number> value. The value used to set the line height on the element is this number multiplied by the element’s font-size. The computed value inherited by the element’s descendants is the value of the number itself. Negative values are not allowed.
<length>
A <length> value. See the <length> property entry for a list of possible values.

The specified length is used in the calculation of the line box height. Negative values are not allowed.

<percentage>
A <percentage> value determined with respect to the font-size of the element. See <percentage> for a list of possible values. Negative values are not allowed.

Both the value used to set the line height on the element itself and the computed value inherited by the element’s descendants are this number multiplied by the element’s font-size.

inherit
The element inherits its line-height value from its parent.

Examples

The following sets the line-height of a paragraph of text and of headings. The recommended line height for paragraphs is 1.4 and for headings it’s 1.2. These values generally provide a good reading experience.

p {
    font-size: 20px;
    line-height: 1.4;
}
h1, h2, h3, h4, h5, h6 {
    line-height: 1.2;
}
                

The following sets the line-height property as part of the font shorthand.

font: 16px/1.4 "Open Sans", sans-serif;
                

Live Demo

View this demo on the Codrops Playground

The following two examples show the difference between using a unit line-height value and a unitless value and how that affects the inherited value on an element’s child.

View this demo on the Codrops Playground

Browser Support

The line-height property is supported in all major browsers: Chrome, Firefox, Safari, Opera, Internet Explorer, and o Android and iOS.

Written by

Last updated February 8, 2015 at 10:27 am by Sara Soueidan

Do you have a suggestion, question or want to contribute? Submit an issue.