The CSS line-height property controls the height of a line of text. It affects readability, but it also affects layout: a line’s height contributes to its element’s content box, including space above and below the visible characters. section 12.6 section 12.1.2
Prefer a unitless value for inherited line height
Set body { line-height: 1.2; } and give a paragraph font-size: 2em. With a 16 px body font, the paragraph’s 32 px font produces a 38.4 px line height: 32 × 1.2. If the body instead uses 1.2em, its calculated 19.2 px line height is inherited by the larger paragraph, potentially making its lines overlap. A unitless number passes the multiplier to descendants so each can calculate line height against its own font size. section 2.5
Listing 2.16 Line height with a unitless number
body {
line-height: 1.2; #1
}
.about-us {
font-size: 2em;
}
The body rule supplies a reusable multiplier while the paragraph changes font size. section 2.5
Account for that line box when matching a design’s vertical gaps. At 16 px with line-height: 1.4, a single line occupies 22.4 px; the extra 6.4 px is split above and below the text. A 30 px margin between a heading and paragraph with those same measurements therefore looks like about 36.4 px between the visible text. Adjust the margin rather than assuming it alone determines the visible gap. section 12.1.2
Padding on inline elements creates a different trap: it makes each element taller without increasing the line’s height. If padded tags wrap, their backgrounds can overlap across rows. Increasing their line-height makes room; flex items or inline-blocks behave differently because their lines can grow to accommodate them. section 12.1.3
For body copy, try unitless values around 1.4–1.6, comparing a setting that feels too tight with one that feels too loose. Longer lines generally benefit from more line height; large headings often need less. Judge the result alongside font size, line length, and letter spacing rather than treating one value as universal. section 12.6.1 section 12.7
