em vs rem in CSS
Both are relative units, but they're relative to different things — and that decides which to reach for.
The difference
rem is relative to the ROOT font size (html). em is relative to the ELEMENT's own font size, so it compounds when nested — an em inside an em inside an em multiplies.
Which to use
Use rem for font sizes and spacing so the layout respects the user's browser font setting (accessibility) and stays predictable. Use em for component-relative spacing that should scale with that component's text.
html { font-size: 16px; }
h1 { font-size: 2rem; } /* 32px, scales with root */
.box { padding: 1.5em; } /* relative to this element's font */Master CSS units and layout
Units, the box model, Flexbox, Grid and responsive CSS — in the Complete Frontend Kit's HTML & CSS Handbook.
⚡ Get the Complete Frontend Kit → ₹499Frequently asked questions
- Why can em be problematic?
- Because it compounds through nesting, sizes can multiply unexpectedly. rem avoids this by always referring to the root.
- Should I use px or rem?
- rem for type and spacing (respects user zoom); px for things that shouldn't scale, like 1px borders.