What does 50% mean? It depends on the property
padding-top: 10% is 10% of the parent's WIDTH (400px), not its height.
Relative units measure against something else: em against the font size, rem against the root font size, % against a property-specific reference, and ch/ex against the font's own letters; choosing the right reference makes designs scale with the reader.
Change the code and press Run (Ctrl+Enter). Predict what will happen first, then break it on purpose and read what changes. Your edits are saved and match the lesson page.
Ready for more? This phase has 5 hands-on exercises with automatic checks.
Practice questions
Write the code in the editor, run it, then open the model answer to compare.
Write a type scale in rem for h1 (40px), h2 (28px), p (16px) and .caption (13px) at the default root size.
Make an .icon span sit next to text and always be the same height as that text, whatever the text size.
Make a paragraph never wider than 60 characters and center it on the page.
Explain it without notes
Explain the difference between em and rem, including what em refers to on font-size versus on padding.
Why are rem font sizes better for accessibility than px font sizes?
What does a percentage refer to for width, height, padding-top and font-size?
When would you choose em over rem on purpose?
Preview
Console
Nothing logged yet.Expected console output
width 50% = 200px
height 50% = 100px
padding-top 10% = 40px