Line height in CSS - Browser Rendering Trace

Render Flow - Line height

[Parse CSS] -> [Match selector] -> [Apply line-height property] -> [Calculate line box height] -> [Adjust inline box positions] -> [Reflow text layout] -> [Paint text]

The browser reads the CSS, finds elements matching the selector, applies the line-height property, calculates the height of each line box, adjusts vertical spacing of inline boxes, then reflows and paints the text.

Render Steps - 3 Steps

Code Added:<p>This is a line of text.<br>This is another line.</p>

Before

→

After

[p]
| This is a line of text.
| This is another line.

Adding the paragraph with two lines of text creates two lines stacked closely with default spacing.

🔧 Browser Action:Creates DOM nodes and lays out text with default line height

Code Sample

A paragraph with two lines of text spaced apart vertically by double the font size, inside a bordered box.

CSS

<p>This is a line of text.<br>This is another line.</p>

CSS

p {
  line-height: 2;
  border: 1px solid black;
  width: 12rem;
}

Render Quiz - 3 Questions

After applying step 3, what visual change do you see in the paragraph?

A Paragraph width increases

B Text becomes bold

C Lines have more vertical space between them

D Text color changes

Common Confusions - 3 Topics

Why does line-height affect space above and below text, not just between lines?

Line-height sets the total height of each line box, which includes space above and below the text baseline, so it affects vertical spacing around each line, not just the gap between lines. See render_steps 1 and 3 where spacing grows evenly.

💡 Think of line-height as the height of each text row's box, not just the gap.

Why does line-height accept numbers without units and still work?

A unitless number multiplies the font size to set line box height, making spacing scale automatically if font size changes. This is why 'line-height: 2' doubles spacing relative to font size. See property_table for number values.

💡 Unitless line-height scales with font size; lengths are fixed.

Why doesn't line-height change the font size?

Line-height only changes the vertical space around text lines, not the size of the letters themselves. The font size stays the same, but lines get more or less vertical room. See render_steps 1 and 3 for difference.

💡 Line-height controls spacing, font-size controls letter size.

Property Reference

Property	Value Applied	Effect on Line Box Height	Visual Effect	Common Use
line-height	normal	Default height based on font size	Lines spaced normally	Default readable text spacing
line-height	number (e.g., 2)	Multiplies font size by number	Lines spaced proportionally taller	Increase readability or style
line-height	length (e.g., 3rem)	Sets fixed height for line box	Lines spaced exactly by length	Precise control over spacing
line-height	percentage (e.g., 150%)	Sets height as percent of font size	Lines spaced proportionally	Adjust spacing relative to font size

Concept Snapshot

line-height sets the height of each line box around text. Default is 'normal', roughly 1.2 times font size. Unitless numbers multiply font size for scalable spacing. Lengths and percentages set fixed or relative heights. Controls vertical spacing, not font size. Useful for improving readability and style.