Line height in CSS - Practice Problems & Coding Challenges

Challenge - 5 Problems

🧠 Conceptual

intermediate

Understanding line-height unitless values

What is the effect of setting line-height to a unitless number like 1.5 in CSS?

A It multiplies the element's font size by 1.5 to determine the line height.

B It sets the line height to exactly 1.5 pixels.

C It sets the line height to 1.5 times the browser default line height, ignoring font size.

D It sets the line height to 1.5 em units regardless of font size.

💡 Hint

Think about how line height relates to font size when no unit is specified.

When line-height is set as a unitless number, it acts as a multiplier of the element's font size. For example, if the font size is 16px and line-height is 1.5, the line height becomes 24px.

📝 Syntax

intermediate

Which CSS line-height declarations are valid?

Which of the following CSS line-height declarations are valid and will not cause a syntax error?

A line-height: 1.5px;

B line-height: 1.5em;

C line-height: 150%;

D line-height: 1.5pt;

💡 Hint

line-height accepts unitless numbers, percentages, and all standard length units like em, px, pt.

CSS line-height accepts unitless numbers, percentages (%), and length units including em and pt. However, px is not recommended and may cause inconsistent rendering. The valid options here are 1.5em and 150%.

❓ rendering

advanced

Visual difference of line-height values

Given the following CSS, what will the vertical spacing between lines look like in the browser?

CSS

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

A Lines will have a fixed 2px space between them regardless of font size.

B Lines will have no extra spacing beyond the font size.

C Lines will have double the font size space between them, creating large vertical gaps.

D Lines will be spaced very tightly, almost overlapping.

💡 Hint

Consider what multiplying the font size by 2 means for line spacing.

With line-height: 2; and font size 16px, the line height becomes 32px, doubling the vertical space between lines.

❓ selector

advanced

Applying line-height to nested elements

If a parent <div> has line-height: 1.5; and a child <span> inside it has line-height: 2;, what line height will the child text have?

CSS

<div style="line-height: 1.5;">
  <span style="line-height: 2;">Text</span>
</div>

A The child text will have line height 2 times the parent's font size.

B The child text will inherit the parent's line height of 1.5.

C The child text will have line height 1.5 times its font size.

D The child text will have line height 2 times its own font size.

💡 Hint

Remember how CSS inheritance and unitless line-height values work.

Unitless line-height values multiply the element's own font size. The child with line-height: 2; uses 2 times its own font size, not the parent's.

❓ accessibility

expert

Choosing line-height for readability and accessibility

Which line-height value is generally best for improving readability and accessibility of body text on a webpage?

A line-height: 1;

B line-height: 1.5;

C line-height: 1.2;

D line-height: 2.5;

💡 Hint

Think about comfortable spacing that helps the eye track lines without too much gap.

Line height around 1.5 is widely recommended for body text to improve readability and accessibility by providing enough vertical spacing without excessive gaps.

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