CSS units · Current element font size
em
One em equals the current element's computed font size and compounds through nesting.
Key facts
| Reference | Current element font size |
|---|---|
| font-size property | Relative to the parent's font size |
| Nesting | Compounds |
| Inherits | Indirectly, through font size |
| Best for | Component-local spacing |
| Standard | CSS Values and Units Level 4 |
Local, not global
em is relative to the element's own computed font size. If a paragraph is 18px, 1.5em padding is 27px. When em is used for the font-size property itself, the reference is the parent's font size, because the element's own size is what is being computed.
That dual behaviour is useful for components: a button's padding can scale with its label size without knowing the page's root size. It is also the source of compounding bugs.
The compounding trap
Nested elements with font-size: 0.9em shrink at every level: 16px becomes 14.4, then 12.96, then 11.66. A list nested three deep can become unreadably small. Use rem for a stable scale, or set an explicit font size at the boundary where compounding should stop.
em is also used in media queries, where it refers to the initial font size rather than the root's current value. Check the specification if a breakpoint behaves unexpectedly.
Frequently asked questions
Why is my nested text getting smaller?
Each level multiplies by its own em-based font size. Use rem or reset the font size at the parent.
Is em relative to the parent or the element?
For font-size, the parent. For other properties, the element's own computed font size.