The em unit shows up in almost every CSS file, but it behaves differently from every other unit on the page — it doesn't have a fixed size of its own. Its value depends entirely on the font size of whatever element it's applied to.
How EM Is Calculated
1em equals the computed font size of the current element. If a paragraph has font-size: 18px, then inside that paragraph 1em = 18px, and 2em = 36px for its padding, margin, width or any other length. Change the font size, and every em value tied to it scales automatically — that's the whole appeal.
The formula in both directions is simple:
- em = px ÷ reference font size — 24px inside a 16px context is 1.5em.
- px = em × reference font size — 0.75em inside a 20px context is 15px.
The One Rule People Miss: font-size Uses the Parent
There is a single exception to "em means this element's font size". When em is used on the font-size property itself, it refers to the parent's font size — otherwise the value would depend on itself. Every other property on the element then uses the newly computed size.
.parent { font-size: 16px; }
.child {
font-size: 1.5em; /* 1.5 × 16px (parent) = 24px */
padding: 1em; /* 1 × 24px (own size) = 24px, not 16px */
margin-bottom: 0.5em; /* 0.5 × 24px = 12px */
}This trips people up when they expect padding: 1em on the child to equal 16px. It doesn't: by the time padding is resolved, the child's own font size is already 24px.
Where EM Actually Helps
- Component-relative sizing. An icon set to
font-size: 1.2eminside a button stays proportional to that specific button's own text size, without a separate rule for every button variant. - Padding that scales with text. A badge or tag whose padding is set in em grows and shrinks along with its own font size, keeping its shape consistent at any size.
- Letter-spacing and text decoration.
letter-spacing: 0.05emkeeps tracking visually identical on a 12px caption and a 48px headline, which a px value cannot do. - Icon gaps and inline spacing.
margin-right: 0.4embetween an icon and its label stays balanced at every text size.
Here is a button that scales as a unit — change one font-size and the padding, radius and icon follow:
.btn {
font-size: 1rem; /* set the size once */
padding: 0.625em 1.25em; /* 10px 20px at 16px */
border-radius: 0.375em; /* 6px at 16px */
}
.btn svg { width: 1.2em; height: 1.2em; margin-right: 0.4em; }
.btn--large { font-size: 1.25rem; } /* everything grows to match */The Compounding Problem
Nest several elements that each set their own em-based font-size, and the values multiply on top of each other rather than adding. Take a 16px base font, wrapped in three nested elements each set to 1.25em: the final size isn't 16px plus a bit — it compounds to roughly 31px (16 × 1.25 × 1.25 × 1.25). This is the single most common complaint developers have about em, and it's why most teams reach for rem for anything that shouldn't drift as markup gets restructured.
| Nesting level | Rule | Computed size |
|---|---|---|
| Root | browser default | 16px |
| Level 1 | font-size: 1.25em | 20px |
| Level 2 | font-size: 1.25em | 25px |
| Level 3 | font-size: 1.25em | 31.25px |
The same thing happens in reverse. A nested list with li { font-size: 0.875em; } gets smaller at every level: 14px, then 12.25px, then about 10.7px for a third-level list item. A safe fix is to set the font size in rem on repeated, nestable elements, and keep em for spacing inside them.
A Quick Worked Example
Say a card component has font-size: 14px, and its title inside uses font-size: 1.5em. The title renders at 21px (14 × 1.5). Reuse that same card component somewhere with a larger base font — say 18px — and the title automatically scales to 27px, with zero extra CSS. That's em doing exactly what it's meant to do: scale a component's internals with the component itself.
EM in Line-Height and Media Queries
Line-height
line-height: 1.5em is calculated once on the element where it is declared and then inherited as a fixed length. If a 16px body sets line-height: 1.5em, children inherit 24px — so a 40px heading inside ends up with 24px line spacing and its lines overlap. A unitless value such as line-height: 1.5 is inherited as a ratio instead and recalculated for every element, which is almost always what you want.
Media queries
Inside a media query, em is not relative to any element. It refers to the browser's initial font size, which is 16px unless the user has changed their default. So @media (min-width: 48em) means 768px by default but 960px for someone whose default font size is 20px. Changing html { font-size } in your stylesheet does not affect it.
Accessibility Notes
Em values ultimately chain back to the root font size, so they respect a user's larger default font-size setting — as long as no ancestor breaks the chain with a px font size. If a wrapper sets font-size: 14px, every em value inside it is locked to 14px and stops responding to the user's preference. Keep px out of font-size declarations and em-based components stay accessible. Our article on how browser zoom affects rem and em walks through this behaviour in detail.
EM vs REM, in One Line
Use rem when a value should scale off one predictable, page-wide size — typography, spacing, layout. Use em when a value should scale specifically with its own element's font size, like the icon-in-a-button example above.
Converting between px and em by hand gets tedious fast — our PX to EM converter does the math instantly with any custom base size.
Frequently Asked Questions
What does "em" stand for?
It comes from typography, where an em was traditionally the width of a capital M in a given typeface. In CSS it simply means "one times the current font size" and has nothing to do with the width of any letter.
Is 1em always 16px?
Only when the relevant font size is 16px, which happens to be the browser default. Inside an element with an 18px font size, 1em is 18px. Always check the computed font size in your browser's DevTools before converting.
Can I use em for width and height?
Yes. max-width: 35em is a common way to cap paragraph length at a comfortable reading measure, because it grows when the text grows. For page-level layout, percentages or viewport units are usually a better fit.
Why do my nested lists keep shrinking?
Because a font-size in em multiplies at each nested level. Switch the list item font size to rem, or set nested lists back to font-size: 1em so they inherit without shrinking further.
Try It Yourself
Pick any value from your stylesheet and convert it with the PX to EM converter using your component's real font size as the base, then check the reverse with the EM to PX converter.