em vs rem in CSS — What's the Difference?
em is relative to the current element's font size (and compounds through nesting); rem is always relative to the root element's font size.
Published September 21, 2026
em is a relative CSS unit based on the font-size of the current element (or its nearest ancestor with a set font-size), meaning it compounds when nested. rem (root em) is always relative to the root <html> element's font-size, regardless of nesting.
Common causes
- em's compounding behavior was originally designed for consistent typographic scaling within a single component, but it becomes unpredictable across deeply nested elements where each level might multiply the effective size further
How to fix it
- Use rem for most sizing (font-size, spacing, widths) since it stays predictable no matter how deeply an element is nested in the DOM
- Use em specifically when you want a value to scale relative to its own element's font size, like padding on a button that should grow proportionally with its text
- Set the root font-size (usually on html) deliberately — many teams set it to 62.5% (10px) to make rem math simpler (1.6rem = 16px), or just leave the browser default of 16px
Example
html { font-size: 16px; }
.parent { font-size: 20px; }
.child { font-size: 1.5em; } /* 30px — relative to parent's 20px */
.child2 { font-size: 1.5rem; } /* 24px — relative to root's 16px, regardless of nesting */FAQ
Which should I default to?
rem for most layout and typography, since it avoids the compounding surprises of em in nested components — reserve em for the specific cases where scaling relative to a local font-size is actually the intent.