What is the difference between em and rem units in CSS?

· Category: HTML & CSS

Short answer

rem is always relative to the root (<html>) font size, while em is relative to the font size of the element's parent. This makes rem more predictable for global scaling.

Key differences

  • rem: Stable and linear. If the root font size is 16px, 2rem is always 32px regardless of nesting.
  • em: Contextual and composable. 1.5em on a nested list inside a nested list can compound, leading to unexpectedly large text.

Example

html { font-size: 16px; }
.parent { font-size: 1.25rem; }   /* 20px */
.child { font-size: 1.5em; }     /* 30px relative to parent */
.grandchild { font-size: 1.5em; } /* 45px — compounds! */

.rem-child { font-size: 1.5rem; } /* always 24px */

When to use each

  • Use rem for typography, margins, and padding that should scale globally.
  • Use em for component-scaled spacing where the component should adapt to its own font size, such as button padding or icon sizing.