Buttons that keep their shape with em padding
Only font-size differs between the buttons. The padding follows each button's own text size.
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
Normal: font 16px padding 8px 16px
Large: font 24px padding 12px 24px
Small: font 12px padding 6px 12px