line-height

line-height participates in line-box sizing. It is spacing within lines, not margin between paragraphs. A unitless multiplier usually adapts more reliably to descendants with different font sizes.

Compare the same text at two line heights

Both paragraphs use the same font size and width. The second has more vertical space between line baselines; its total height grows because the lines have larger boxes.

<p class="tight">
  Read the source, change one value, and compare the result at a narrow width.
</p>
<p class="roomy">
  Read the source, change one value, and compare the result at a narrow width.
</p>

p {
  max-width: 22ch;
  font-size: 1rem;
  background: #eff6ff;
}
.tight {
  line-height: 1.1;
}
.roomy {
  line-height: 1.6;
}

Let larger descendants keep proportional spacing

The unitless 1.5 is inherited as a multiplier. The 1.5rem child therefore uses a 2.25rem line height instead of inheriting a fixed length computed from the parent’s smaller font.

<div class="note">
  <p>Normal-sized explanatory text.</p>
  <p class="larger">Larger text keeps its own proportional line spacing.</p>
</div>

.note {
  font-size: 1rem;
  line-height: 1.5;
  max-width: 24ch;
}
.larger {
  font-size: 1.5rem;
}

Values and inheritance

The initial value is normal and line-height is inherited. Normal depends on font metrics and the browser; it is not a guaranteed 1.2. A nonnegative number multiplies the element’s own font size. Lengths set a computed length; percentages resolve against the element’s font size before inheritance.

This distinction matters: line-height:150% on a 16px parent computes to 24px, which a larger child may inherit unchanged. Line-height:1.5 lets that child multiply its own size. Mixed inline fonts, replaced elements, and vertical-align can still enlarge a line beyond one element’s nominal height.

Keep enlarged text usable

Choose spacing based on the actual typeface and text, then test zoom and user overrides. About 1.5 is a useful starting point for body text, not a universal guarantee. Avoid fixed container heights that clip expanded lines. In vertical writing, line height controls spacing across the line progression direction.

Learn font-size, vertical-align, and margin.

Sources and browser support

MDN: line-height describes the syntax and links to the specification and compatibility data. Check individual values in that table when supporting older browsers.