How Do Relative CSS Units rem and em Differ in Calculation?

Understanding the difference between rem and em is essential for building scalable, accessible, and responsive web layouts. While both are relative CSS units derived from font size rather than fixed pixels, their fundamental difference lies in their reference point: em calculates its value relative to the font size of its immediate parent or current element, whereas rem (root em) calculates its value strictly relative to the font size of the root HTML element (<html>). This guide breaks down the specific calculation mechanics, compounding behaviors, and practical use cases for each unit.

The Reference Point: Root vs. Parent

The core distinction between the two units comes down to the origin of the base value used in calculations.

rem (Root EM): Always references the font size of the document root (:root or <html>). If the root element has a default browser font size of 16px, 1rem equals 16px across the entire document, regardless of where the element is nested in the DOM tree.
em (Element/Emphasis): References the computed font-size of the element's parent when styling font-size. When styling other properties—such as padding, margin, or width—em references the computed font-size of the element itself.

How `rem` Calculates Values

Because rem depends solely on the root font size, its calculation remains predictable and constant across deeply nested components.

Consider the default root font size:

html {
  font-size: 16px; /* Standard browser default */
}

Any element styled with rem multiplies the declared value by this root base:

0.75rem = 0.75 × 16px = 12px
1rem = 1 × 16px = 16px
1.5rem = 1.5 × 16px = 24px
2rem = 2 × 16px = 32px

Even if a button using padding: 1rem is placed inside five nested container elements, 1rem will reliably resolve to 16px (unless the root font size itself is modified via media queries or user browser settings).

How `em` Calculates Values

The calculation of em is contextual and depends on both the property being styled and the element's position in the DOM hierarchy.

Font-Size Calculations and Compounding

When applying font-size using em, the browser looks up the DOM tree to find the font size of the parent container:

.card {
  font-size: 18px; /* Parent container */
}

.card .title {
  font-size: 1.5em; /* 1.5 × 18px = 27px */
}

If multiple nested elements define font-size in em, their sizes compound exponentially:

ul {
  font-size: 1.2em; /* 1.2 × 16px = 19.2px */
}

Top-level list item: 1.2em = 19.2px
Nested list item (level 2): 1.2em × 19.2px = 23.04px
Nested list item (level 3): 1.2em × 23.04px = 27.65px

This compounding effect can cause unintended text scaling issues in dynamic or deeply nested structures.

Non-Typography Property Calculations

When using em for properties like padding, margin, border-radius, or width, the value is calculated relative to the element's own computed font size, not its parent:

.button {
  font-size: 20px;
  padding: 0.5em 1em; /* Vertical: 0.5 × 20px = 10px; Horizontal: 1 × 20px = 20px */
}

If the font size of .button increases to 24px, the padding automatically scales up to 12px vertical and 24px horizontal, preserving the visual proportions of the component.

Summary of Calculation Differences

Feature	`rem`	`em`
Base Reference	Root element (`<html>`)	Parent element (for `font-size`) or self (for other properties)
Compounding Behavior	No compounding	Compounds when `font-size` is nested
Predictability	High across complex layouts	High within isolated, self-contained components
Best Used For	Layout typography, grids, site-wide spacing, global layout containers	Component-specific spacing (padding/margin), icons tied to text size, proportional UI elements

Using rem for global typography and page layout ensures consistent vertical rhythm without unexpected scaling. Using em for component padding, margins, and icon dimensions ensures that elements scale proportionally whenever their specific font size changes.