juniorCSS
Difference between em and rem units?
Updated Apr 28, 2026
Short answer
'em' is relative to the font-size of its direct or nearest parent, whereas 'rem' is relative to the root (html) font-size.
Deep explanation
Using 'em' is useful for components that need to scale proportionally to their own typography. 'rem' (root em) guarantees consistency across the entire document because it always scales based on the <html> tag's font size (default usually 16px), avoiding the compounding issue of 'em'.
Real-world example
Using rems for global margins/paddings and ems for margins within a text block (like space between paragraphs).
Common mistakes
- Using em for nested lists, resulting in text that keeps shrinking or growing exponentially.
Follow-up questions
- Why is it recommended to use rem for font sizes?