Bird
Raised Fist0
CSSmarkup~20 mins

Relative units in CSS - Practice Problems & Coding Challenges

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
Challenge - 5 Problems
🎖️
Relative Units Master
Get all challenges correct to earn this badge!
Test your skills under time pressure!
🧠 Conceptual
intermediate
1:30remaining
Understanding rem vs em units
Which statement correctly describes the difference between rem and em units in CSS?
A<code>rem</code> is relative to the root element's font size, while <code>em</code> is relative to the font size of the current element.
B<code>rem</code> and <code>em</code> are both relative to the viewport width.
C<code>rem</code> is relative to the parent element's font size, while <code>em</code> is relative to the root element's font size.
D<code>rem</code> is an absolute unit, while <code>em</code> is relative to the current element's height.
Attempts:
2 left
💡 Hint
Think about which element's font size each unit depends on.
📝 Syntax
intermediate
2:00remaining
CSS code output with relative units
Given the CSS below, what will be the computed font size of the <p> inside .container if the root font size is 16px?
CSS
html { font-size: 16px; }
.container { font-size: 1.5rem; }
.container p { font-size: 2em; }
A24px
B48px
C32px
D16px
Attempts:
2 left
💡 Hint
Calculate step by step: root font size → container font size → p font size.
❓ selector
advanced
1:30remaining
Which CSS rule sets padding using viewport width?
Which CSS rule correctly sets the padding of a div to 5% of the viewport width?
Adiv { padding: 5vw; }
Bdiv { padding: 5vh; }
Cdiv { padding: 5rem; }
Ddiv { padding: 5em; }
Attempts:
2 left
💡 Hint
vw stands for viewport width, vh for viewport height.
❓ layout
advanced
2:00remaining
Responsive layout with relative units
You want a container to always be half the viewport width and have a height equal to 10 times the root font size. Which CSS achieves this?
A.container { width: 50%; height: 10vw; }
B.container { width: 50vh; height: 10em; }
C.container { width: 50vw; height: 10rem; }
D.container { width: 50rem; height: 10vh; }
Attempts:
2 left
💡 Hint
Remember what vw and rem mean.
❓ accessibility
expert
2:30remaining
Ensuring accessible font scaling with relative units
Which CSS practice best supports users who adjust their browser's default font size for accessibility?
AUse <code>em</code> units only inside deeply nested elements.
BUse only <code>px</code> units for precise control over font size.
CUse <code>vh</code> units for font sizes to scale with viewport height.
DUse <code>rem</code> units for font sizes and avoid fixed pixel sizes.
Attempts:
2 left
💡 Hint
Think about how font sizes respond to user settings.

Practice

(1/5)
1. Which CSS unit is relative to the root element's font size?
easy
A. em
B. rem
C. px
D. vw

Solution

  1. Step 1: Understand root-relative units

    The rem unit always refers to the font size set on the root <html> element.

  2. Step 2: Compare with other units

    em is relative to the parent element's font size, px is fixed pixels, and vw is relative to viewport width.

  3. Final Answer:

    rem -> Option B

  4. Quick Check:

    Root font size = rem [OK]
Hint: Root font size uses rem, not em or px [OK]
Common Mistakes:
  • Confusing em with rem
  • Thinking px is relative
  • Mixing viewport units with font units
2. Which of the following is the correct syntax to set a font size to 2 times the parent element's font size?
easy
A. font-size: 2vw;
B. font-size: 2rem;
C. font-size: 2px;
D. font-size: 2em;

Solution

  1. Step 1: Identify the unit for parent-relative size

    em units scale relative to the parent element's font size.

  2. Step 2: Check other options

    rem is root-relative, px is fixed, and vw is viewport width relative.

  3. Final Answer:

    font-size: 2em; -> Option D

  4. Quick Check:

    Parent-relative font size = em [OK]
Hint: Use em for parent-relative sizes, rem for root-relative [OK]
Common Mistakes:
  • Using rem instead of em for parent size
  • Using px which is fixed size
  • Confusing vw with font size units
3. Given the CSS below, what will be the width of the <div> if the viewport width is 1000px?
div {
  width: 50vw;
}
medium
A. Depends on parent width
B. 50px
C. 500px
D. 1000px

Solution

  1. Step 1: Understand vw unit

    1vw equals 1% of the viewport width. So 50vw is 50% of viewport width.

  2. Step 2: Calculate width

    Viewport width is 1000px, so 50vw = 50% of 1000px = 500px.

  3. Final Answer:

    500px -> Option C

  4. Quick Check:

    50vw = 50% viewport width = 500px [OK]
Hint: vw is % of viewport width, multiply by viewport size [OK]
Common Mistakes:
  • Thinking vw depends on parent width
  • Confusing vw with px
  • Calculating 50vw as 50px
4. What is wrong with this CSS if the goal is to make the font size 1.5 times the parent font size?
p {
  font-size: 1.5rem;
}
medium
A. rem is root-relative, not parent-relative
B. 1.5rem is invalid syntax
C. font-size cannot use rem units
D. Should use px instead of rem

Solution

  1. Step 1: Identify unit behavior

    rem units are relative to the root font size, not the parent element.

  2. Step 2: Match goal with unit

    To scale relative to the parent font size, em should be used instead of rem.

  3. Final Answer:

    rem is root-relative, not parent-relative -> Option A

  4. Quick Check:

    Parent-relative size needs em, not rem [OK]
Hint: Use em for parent-relative font size, not rem [OK]
Common Mistakes:
  • Thinking rem scales with parent
  • Believing 1.5rem is invalid syntax
  • Using px for scalable font sizes
5. You want a button width to be 30% of the viewport width but never smaller than 200px. Which CSS snippet correctly uses relative units and a minimum width?
hard
A. button { width: 30vw; min-width: 200px; }
B. button { width: 30%; min-width: 200vw; }
C. button { width: 30rem; min-width: 200px; }
D. button { width: 30em; min-width: 200%; }

Solution

  1. Step 1: Understand width units

    30vw means 30% of viewport width, which matches the requirement.

  2. Step 2: Check minimum width

    min-width: 200px ensures the button never shrinks below 200 pixels.

  3. Step 3: Verify other options

    Other options fail: 30rem is root font-relative; 30% with min-width: 200vw uses parent-relative width and huge min-width; 30em with min-width: 200% uses font-relative and parent-relative units incorrectly.

  4. Final Answer:

    button { width: 30vw; min-width: 200px; } -> Option A

  5. Quick Check:

    30vw + min-width: 200px [OK]
Hint: Use vw for viewport %, min-width in px for fixed minimum [OK]
Common Mistakes:
  • Using % for viewport width instead of vw
  • Setting min-width in vw or % incorrectly
  • Confusing rem/em with viewport units