CSS em vs rem: which unit to use
The commands on this page have not been executed by our verification runner yet.updated 2026-10-20
- tool
- CSS
- compares
- em vs rem
rem is relative to the font size of the root element (html), usually 16px, so 1.5rem is the same size anywhere on the page. em is relative to the font size of the element itself (or, for font-size, of its parent), so values multiply when elements are nested. Use rem for most sizes, and em for spacing that should scale with the text of one component.
Criterion by criterion
| Criterion | em | rem |
|---|---|---|
| Relative to | the element's font size (for font-size: the parent's) | the root (html) font size |
| Nesting | compounds: 1.2em inside 1.2em is 1.44 times the outer size | never compounds |
| Follows the user's browser font setting | yes, through inheritance | yes, directly |
| Predictability | depends on where the element sits | same value everywhere |
| Good for | padding and icons inside a button that should grow with its text | font sizes, layout spacing, media queries |
The compounding effect
<style>
.em li { font-size: 1.2em; } /* nested lists keep growing: 1.2, 1.44, 1.728 … */
.rem li { font-size: 1.2rem; } /* every level is 1.2 × 16px = 19.2px */
</style>
<ul class="em"><li>one<ul><li>two<ul><li>three</li></ul></li></ul></li></ul>
<ul class="rem"><li>one<ul><li>two<ul><li>three</li></ul></li></ul></li></ul>A sensible default
html { font-size: 100%; } /* respect the user's setting, usually 16px */
h1 { font-size: 2.25rem; }
.card { padding: 1.5rem; }
.button { font-size: 1rem; padding: 0.5em 1em; } /* padding scales with this button's text */Sources
Related pages
cheat sheets · cssCSS flexbox cheat sheet: container and item propertiesCSS flexbox cheat sheet: display flex, flex-direction, justify-content, align-items, flex-wrap and gap on the container; flex, align-self, order on items.compat · cssCSS :has() browser supportCSS :has() works in Chrome and Edge 105+, Safari 15.4+ and Firefox 121+, per MDN browser-compat-data. Feature-detect it with @supports selector(:has(a)).changes · tailwindcssTailwind CSS v3 to v4: renamed utilities and breaking changesTailwind CSS v4 moves config into CSS with @import and @theme, splits the PostCSS plugin and CLI, renames shadow, blur and rounded scales, needs Safari 16.4.