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.