What Is the Difference Between em and rem in CSS?
Learn the difference between em and rem CSS units, why em compounds through nested elements, and when to use rem for predictable, root-based sizing.
Expected Interview Answer
em is a relative CSS unit sized against the font-size of its own element's parent (so it compounds through nesting), while rem is sized only against the root html element's font-size, so it stays constant no matter how deeply an element is nested.
Because em inherits and multiplies through each nested level, using em for font-size on deeply nested elements can produce unexpectedly large or small text as each parent's size compounds with the child's. rem avoids that compounding by always referencing the single root font-size, which makes it predictable for global typography scales, while em is still useful locally, for example sizing padding or icons relative to their own element's current font-size so they scale together.
- rem gives predictable, non-compounding global sizing
- em is useful for component-local proportional scaling
- Both respect user browser font-size preferences (accessibility)
- Changing the root font-size rescales an entire rem-based layout instantly
- Avoids the compounding-size bugs of deeply nested em values
AI Mentor Explanation
em is like a bowler's pace being described relative to whoever bowled before them in the same over, so each delivery's speed compounds off the last if everyone keeps comparing to the previous bowler. rem is like measuring every bowler's pace against one fixed radar gun reading of 140 km/h set at the start of the match, so no matter how many bowlers rotate through.
Step-by-Step Explanation
Step 1
em is relative to the parent
An element's em is computed from its parent element's computed font-size, so nested elements compound sizes down the tree.
Step 2
rem is relative to the root
rem always resolves against the html element's font-size (typically 16px by default), regardless of nesting depth.
Step 3
Compounding problem with em
If a parent has font-size: 1.2em and a child also has font-size: 1.2em, the child renders larger than 1.2x the base because sizes multiply through each level.
Step 4
rem avoids compounding
Because rem ignores intermediate ancestors, setting font-size: 1.2rem always yields the same computed size no matter how deeply nested the element is.
Step 5
When to use which
Use rem for global typography scales and spacing; use em for values that should scale with a specific component's own current font-size, like icon sizing next to text.
What Interviewer Expects
- States clearly that em is relative to the parent, rem to the root
- Explains the compounding effect of nested em values
- Gives a practical example of when each is preferable
- Mentions both respect the user's browser font-size accessibility setting
- Can describe how changing the root font-size rescales rem-based layouts
Common Mistakes
- Saying em and rem are interchangeable
- Believing rem is relative to the immediate parent like em
- Forgetting to test nested em compounding in real components
- Using px for everything and never considering accessibility scaling
Best Answer (HR Friendly)
“em and rem are both flexible font-sizing units, but em sizes relative to the parent element (so it can stack unpredictably in nested content), while rem always sizes relative to the page's root font-size, giving consistent, predictable results across a whole site.”
Code Example
html { font-size: 16px; }
.parent { font-size: 1.2em; } /* 16 * 1.2 = 19.2px */
.parent .child { font-size: 1.2em; } /* 19.2 * 1.2 = 23.04px, compounds */
.parent .child.rem-based { font-size: 1.2rem; } /* always 16 * 1.2 = 19.2px */Follow-up Questions
- How do em and rem interact with the browser's default font-size setting?
- When would you deliberately choose em over rem for spacing?
- How does changing the html font-size affect a rem-based layout?
- What are the accessibility benefits of relative units over px?
- How do em and rem differ from viewport units like vw and vh?
MCQ Practice
1. What is em relative to?
em is computed relative to the font-size of the element's parent, which is why nested em values compound.
2. What is rem relative to?
rem always resolves against the root html element's font-size, regardless of how deeply nested the element is.
3. What problem can arise from using em for font-size on deeply nested elements?
Because each nested em multiplies against its parent's already-scaled size, deeply nested em values can compound into unexpectedly large or small text.
Flash Cards
em is relative to what? — The parent element's computed font-size.
rem is relative to what? — The root html element's font-size, regardless of nesting.
Why can nested em values cause bugs? — Because each level multiplies against the already-scaled parent, sizes compound unexpectedly.
When is em still useful? — For values that should scale with a component's own local font-size, like icon sizing next to text.