CSS Academy · Lesson

Relative Units: em and rem

Size elements relative to parent or root font sizes using em and rem units.

Lesson 2 of 413 steps

Relative Units: em and rem is a free CSS Academy lesson on CoddyKit. This is lesson 2 of 4. You can read the complete lesson below for free — then practise it hands-on in the browser with a built-in code editor and a 24/7 AI tutor. It is part of the CSS Academy learning path, and your progress syncs across the web and the CoddyKit app. The CSS Academy course includes 4 lessons in total.

What are Relative Units?

Relative units scale based on another measurement — usually the font size of an element or the root. They enable scalable, responsive designs that respect user settings.

em — Relative to Parent Font Size

em is relative to the font-size of the current element (for font-size itself) or the parent element (for other properties). This can cause compounding.

<div class="parent">
    Parent (20px)
    <div class="child">
      Child (1.5em = 30px)
      <div class="grandchild">Grandchild (1.5em = 45px!)</div>
    </div>
  </div>

em for Spacing

When em is used for padding, margin, or border-radius, it is relative to the element's own font-size. This creates components that scale proportionally.

<button class="button">Padded Button</button>

rem — Relative to Root Font Size

rem (root em) is relative to the root element's font-size (html). It never compounds and is predictable throughout the page.

<h1>Heading (2.5rem = 40px)</h1>
  <p>Paragraph text (1rem = 16px)</p>
  <small>Small print (0.75rem = 12px)</small>

rem and User Accessibility

If the user increases the browser base font size (e.g. from 16px to 20px for readability), rem units scale accordingly. Fixed px units do not. This is why rem is strongly recommended for typography.

html font-size in Percentages

Set the root font-size as a percentage to respect user browser settings:

<p>Root font-size respects the browser/user default (100%).</p>

em vs rem Choosing

Practical guide:

Use rem for font sizes, spacing tokens, and layout measurements
Use em for component-internal spacing that should scale with the component's font size (e.g. padding on a button)

em in Media Queries

Media queries specified in em respond to browser font size changes. A 48em breakpoint = 768px at default settings but adapts if the user has changed their base font size.

<div class="layout">
    <div>Column A</div>
    <div>Column B</div>
  </div>

Calculating em

The formula: desired px / parent px = em value. If parent is 16px and you want 24px text: 24/16 = 1.5em.

<h2>Heading (24px via 1.5rem)</h2>
  <p>Paragraph (18px via 1.125rem)</p>

Compound em Problem

Nesting em-sized elements causes font-size to compound multiplicatively. This is why rem is preferred for font-size — it always references the root, preventing compounding.

ch — Character Width

The ch unit equals the width of the "0" character in the current font. Useful for constraining text containers to readable line lengths:

<p class="article-body">This paragraph is constrained to about 70 characters per line using the ch unit, which keeps text at a comfortable, readable line length regardless of font size.</p>

Quick Check

A button has font-size: 1.25rem and padding: 0.5em. If the root font-size is 16px, what is the padding in pixels?

Answer it in the interactive lesson

Recap

em scales relative to the current element's font-size (or parent for font-size itself) — it can compound. rem always scales relative to the root and never compounds. Use rem for typography and global spacing; use em for proportional component-internal spacing.

Free to start

Learn CSS with an AI tutor — free

Write and run real code in your browser, get instant help from a 24/7 AI tutor, and pick up where you left off on the web or in the app.

Courses: 40
Lessons: 159

Start learning free View the full course

Frequently Asked Questions

Is the “Relative Units: em and rem” lesson free?

Yes — the full text of “Relative Units: em and rem” is free to read here on the web. To practise it interactively (a built-in code editor and a 24/7 AI tutor) and unlock the rest of the CSS Academy course, upgrade to CoddyKit PRO. The CSS Academy course includes 4 lessons in total.

What will I learn in “Relative Units: em and rem”?

Size elements relative to parent or root font sizes using em and rem units. You practise CSS Academy with hands-on code you run directly in the browser, and a 24/7 AI tutor answers your questions as you work through the lesson.

Do I need any experience to start CSS Academy?

No prior experience is required. CSS Academy on CoddyKit is structured for beginners through advanced learners, so you can start here or from the beginning and move at your own pace. This is lesson 2 of 4.

How long does the “Relative Units: em and rem” lesson take?

Most CoddyKit lessons take about 5–10 minutes. Each one is bite-sized and interactive, so you make steady progress and pick up exactly where you left off across the web and the app.

Can I write and run code in this CSS Academy lesson?

Yes. Every CSS Academy lesson includes a built-in code editor, so you write and run real code right in your browser and get instant AI feedback — no local setup required.

All lessons in this course

← Back to CSS Academy