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.

Practice

1. What does the CSS property line-height control in a webpage?

easy

A. The vertical space between lines of text

B. The color of the text

C. The font size of the text

D. The horizontal space between words

Solution

1. Step 1: Understand the property purpose

   The line-height property sets the amount of vertical space between lines of text in a block.

2. Step 2: Compare options to definition

   Only The vertical space between lines of text correctly describes vertical spacing between lines, others describe unrelated text styles.

3. Final Answer:

   The vertical space between lines of text -> Option A

4. Quick Check:

   Line height = vertical spacing [OK]

Hint: Line height = space vertically between text lines [OK]

Common Mistakes:

• Confusing line height with font size
• Thinking it controls text color
• Mixing it up with letter spacing

2. Which of the following is the correct syntax to set line height to 1.5 in CSS?

easy

A. lineheight = 1.5;

B. line-height: 1.5;

C. line-height = 1.5px;

D. lineHeight: 1.5;

Solution

1. Step 1: Recall CSS property syntax

   CSS properties use hyphenated names and colon to assign values, ending with semicolon.

2. Step 2: Check each option

   line-height: 1.5; uses correct CSS syntax: line-height: 1.5;. Options B and C use incorrect assignment or units, D uses camelCase which is invalid in CSS.

3. Final Answer:

   line-height: 1.5; -> Option B

4. Quick Check:

   CSS property syntax = property: value; [OK]

Hint: CSS uses hyphen and colon, no equals sign [OK]

Common Mistakes:

• Using equals sign instead of colon
• Adding units like px to unitless line height
• Using camelCase instead of hyphen

3. Given this CSS:

p { font-size: 16px; line-height: 2; }

What is the computed line height in pixels for the paragraph text?

medium

A. 16px

B. 2px

C. 32px

D. 8px

Solution

1. Step 1: Understand line-height as a multiplier

   When line-height is a number (like 2), it multiplies the font size to get the line height in pixels.

2. Step 2: Calculate line height

   Font size is 16px, line-height is 2, so 16px x 2 = 32px.

3. Final Answer:

   32px -> Option C

4. Quick Check:

   Line height = font size x number [OK]

Hint: Multiply font size by line-height number [OK]

Common Mistakes:

• Confusing line-height number as pixels directly
• Using line-height value as font size
• Ignoring multiplication and picking wrong units

4. This CSS code is intended to increase line spacing but does not work as expected:

p { line-height: 20; }

What is the error?

medium

A. Missing units like 'px' for line-height value

B. line-height cannot be set on paragraphs

C. line-height value must be less than 1

D. line-height property name is misspelled

Solution

1. Step 1: Check line-height value type

   The value 20 without units is treated as a multiplier, but 20 is unusually large and likely intended as pixels.

2. Step 2: Identify missing units

   To specify exact pixel spacing, units like 'px' are required: line-height: 20px;. Without units, 20 means 20 times font size, which is huge and may cause unexpected layout.

3. Final Answer:

   Missing units like 'px' for line-height value -> Option A

4. Quick Check:

   Units needed for absolute line height values [OK]

Hint: Add units like px for fixed line height values [OK]

Common Mistakes:

• Using large numbers without units expecting pixels
• Thinking line-height can't be set on paragraphs
• Misspelling property name

5. You want to create a responsive paragraph where line height adjusts nicely with font size for readability. Which CSS rule achieves this best?

hard

A. p { font-size: 16px; line-height: 1.5rem; }

B. p { font-size: 16px; line-height: 24px; }

C. p { font-size: 1.2rem; line-height: 24px; }

D. p { font-size: 1.2rem; line-height: 1.5; }

Solution

1. Step 1: Understand responsive units

   Using rem units for font size scales text with root font size, good for responsiveness.

2. Step 2: Use unitless line-height for flexibility

   Setting line-height: 1.5; as a number scales line height relative to font size, adapting well on different devices.

3. Step 3: Compare options

   p { font-size: 1.2rem; line-height: 1.5; } uses rem for font size and unitless line-height, making it flexible. Options B and C fix line height in pixels, less flexible. p { font-size: 16px; line-height: 1.5rem; } mixes units incorrectly.

4. Final Answer:

   p { font-size: 1.2rem; line-height: 1.5; } -> Option D

5. Quick Check:

   Unitless line-height + rem font size = responsive text [OK]

Hint: Use unitless line-height with rem font size for responsiveness [OK]

Common Mistakes:

• Using fixed pixel line height with scalable font size
• Mixing units in line-height property
• Not using unitless line-height for flexible spacing