Bird
Raised Fist0
CSSmarkup~5 mins

Line height in CSS - Cheat Sheet & Quick Revision

Choose your learning style10 modes available
LearnWhyDeepRenderTryChallengeProjectRecallPerf

Start learning this pattern below

Jump into concepts and practice - no test required

or
Recommended
Test this pattern10 questions across easy, medium, and hard to know if this pattern is strong
Recall & Review
beginner
What does the CSS property line-height control?
The line-height property controls the vertical space between lines of text, making text easier to read by adjusting spacing.
Click to reveal answer
beginner
How do you set a line height that is 1.5 times the font size?
You can set it using line-height: 1.5;. This means the space between lines is 1.5 times the font size.
Click to reveal answer
intermediate
What is the difference between using a unitless number and a length value (like px) for line-height?
A unitless number (e.g., 1.5) multiplies the font size to set line height and scales with font size changes. A length value (e.g., 24px) sets a fixed height that does not scale with font size.
Click to reveal answer
intermediate
Why is it better to use a unitless line-height for responsive design?
Because a unitless line-height scales automatically with the font size, it keeps text spacing consistent on different screen sizes and zoom levels.
Click to reveal answer
beginner
What happens if you set line-height to a very small value like 0.5?
The lines of text will be very close together, which can make the text hard to read and look cramped.
Click to reveal answer
What does line-height: 2; mean?
AThe line height is fixed at 2 rem
BThe line height is 2 pixels
CThe line height is twice the font size
DThe line height is half the font size
Which is better for scaling text on different devices?
AUsing a unitless number for line-height
BUsing a percentage for line-height
CUsing a fixed pixel value for line-height
DNot setting line-height at all
If you want tight text lines, which line-height value would you choose?
A1.5
B0.5
C1
D3
What is the default line-height in most browsers if not set?
A1.2 to 1.4
B1
C2
D0.8
Which CSS property affects the vertical space between lines of text?
Atext-indent
Bword-spacing
Cletter-spacing
Dline-height
Explain what the CSS property line-height does and why it is important for text readability.
Think about how text looks when lines are too close or too far apart.
You got /3 concepts.
    Describe the difference between setting line-height with a unitless number versus a fixed length like pixels.
    Consider what happens when font size changes on different devices.
    You got /3 concepts.

      Practice

      (1/5)
      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