Home >CSS >CSS reference – properties, selectors, functions >line-height

line-height

line-height: normal | <number> | <length> | <percentage>

Sets the height of a line of text – the line spacing. For ordinary text 1.4 to 1.6 times the font size is recommended. The difference between the line height and the font height is split equally above and below the text.

Values

normal – the default: by the font, usually about 1.2.
number (without a unit) – a multiple of the font size of the element: 1.5. The recommended form – descendants inherit the number and recalculate it for their own font.
length – a fixed height: 24px, 1.5em.
percentage – of the font size of the element: 150%.

Initial value: normal. Inherited: yes. Applies to: all elements.

Examples

The same line spacing written as a number and in em – the difference shows with a larger font inside:

<div class="number">line-height: 1.4 <p>Large text wraps onto more lines and the lines do not overlap.</p></div>
<div class="em">line-height: 1.4em <p>Large text wraps onto more lines and the lines overlap.</p></div>

.number, .em {
  max-width: 260px;
  margin-bottom: 10px;
  font-size: 12px;
  border: 1px solid #ccc;
}
.number { line-height: 1.4; }
.em { line-height: 1.4em; }
.number p, .em p {
  margin: 0;
  font-size: 24px;
}

result

line-height: 1.4

Large text wraps onto more lines and the lines do not overlap.

line-height: 1.4em

Large text wraps onto more lines and the lines overlap.

With 1.4em the paragraph inherited the computed value of 16.8 px – too little for a 24 px font. The number 1.4 was recalculated for the paragraph to 33.6 px.

Things to watch out for

The units em, px and percentages are inherited already computed – a descendant with a larger font gets the same small line height and the lines overlap. A unitless number does not have this problem.
A single line of text can be centered vertically by setting line-height to the height of the element – but it falls apart when the text wraps onto two lines. Flexbox is more reliable.
For accessibility (WCAG) it must be possible to increase the line height to at least 1.5 without losing content – do not use fixed heights on elements with text.

Browser support

Baseline – widely available: works in all major browsers and has for a long time (since 2015 at the latest). Since version: Chrome 1, Firefox 1, Safari 1. As of October 2026 (MDN browser-compat-data).