What does unitless line-height do differently from a length value?

The key difference is what the child inherits. A unitless number stays a number, so each element applies that multiplier to its own font size. A length computes to an absolute length on the parent, and the child inherits that length rather than recalculating it for its own font size. [S1]

For example, assume the parent’s font size is 20px and the caption’s is 12px:

.parent {
  font-size: 20px;
  line-height: 1.5;
}

.caption {
  font-size: 12px;
}

The parent’s line-height is 1.5 × 20px = 30px. The caption uses the inherited multiplier with its 12px font size, giving an 18px line-height. If the parent instead has line-height: 30px, that length is inherited, so the caption’s line-height remains 30px. The two declarations can therefore produce different spacing around smaller child text. [S1]

With line-height: 1.5, the computed value remains the number 1.5. The child inherits that number, then applies it to its own font size. With line-height: 30px, the parent’s computed value is an absolute length; that length is inherited by the child. [S1]

In the example, the parent’s 20px text has a 30px line-height either way. But the child’s result differs: with the unitless value, 12px × 1.5 gives 18px; with the length, it inherits 30px. That second result may leave more vertical space around the smaller caption than you intended. These calculations explain the inherited line-height values; they do not by themselves determine every detail of how a particular design will look.

Here is the comparison using the same assumed font sizes:

/* Multiplier: the 12px child uses an 18px line-height. */
.unitless {
  font-size: 20px;
  line-height: 1.5;
}

.unitless .caption {
  font-size: 12px;
}

/* Length: the 12px child inherits a 30px line-height. */
.length {
  font-size: 20px;
  line-height: 30px;
}

.length .caption {
  font-size: 12px;
}

I’d start with the unitless value when descendants have different font sizes: it scales with each element’s text size and avoids inheriting the parent’s absolute line-height. The reference recommends unitless values in most cases for this reason. [S1] Choose a length when you specifically want the inherited line-height to stay fixed; check the result on the child text rather than assuming the parent’s value will suit it.

Ask whether the child should scale its line spacing with its own font size. If yes, prefer a unitless multiplier, such as 1.5. If the child should inherit the same absolute line-height as its parent, a length may be intentional. Compare the parent’s and child’s resulting line-height values: in the example, expect 30px on the parent and 18px on a 12px child for the unitless case, versus 30px on both for the length case. [S1]

Those values follow the stated assumptions and inheritance behavior; the source does not establish which spacing will look best for every design. Check your actual component and adjust the value to suit its typography.