em
The font size of the element it is used on. Inside font-size itself, the font size of its parent.
Safe to useBaseline: widely available
| Browser | Since |
|---|---|
| Chrome | 1+ |
| Chrome Android | 18+ |
| Edge | 12+ |
| Firefox | 1+ |
| Firefox Android | 4+ |
| Safari | 1+ |
| Safari iOS | 1+ |
Formula 1em = the font-size of the element; in font-size itself, the parent's
How it works
For almost every property, 1em is the font-size the element itself ends up with. In Chromium, an element at font-size: 1.2em inside a 20px parent came to 24px, and its padding-inline-start: 0.5em to 12px, half of its own 24px and not of the parent’s 20px. Spacing written this way belongs to the component: set the text size once and the padding, gaps and borders in em move with it.
The one property where the rule shifts is font-size itself. There 1em means the parent’s size, because the element’s own size is exactly what the declaration is trying to decide. Each level of nesting multiplies, so lists that set font-size: 1.2em grow by another fifth at every level. Use rem for type sizes that should stay put and keep em for the spacing around them.
Inside a media query there is no element to measure, and em means the browser’s initial font size, the one from the reader’s settings. A breakpoint of 40em is 640px at the default of 16px and 960px for a reader who raised the default to 24px. Setting html { font-size: 20px } in your own CSS does not move that breakpoint.
Try it
Measure the font-relative units
Pick a font and a size. The page measures 1em, 1ex, 1ch, 1cap and 1lh in that font, here, in your browser.
| Unit | Measured | Share of the font size |
|---|---|---|
1em | ||
1ex | ||
1ch | ||
1cap | ||
1lh |
The same as a table
| Unit | Measures |
|---|---|
1em | The font size of the element. |
1ex | How tall the letter x is in this font. |
1ch | The width of the digit zero in the font. |
1cap | The height of a capital letter in the font. |
1lh | The line height of the element. |
What changes it
- Moves with
- the reader's text size
- page zoom
- Stays put under
- the window size
- the font in use
- the query container
- phone toolbars
- the writing mode
Reach for it when
Padding, gaps and borders inside a component that sets its own font-size, and media query breakpoints.
Watch out
em compounds. In font-size it multiplies the parent's size, so a list nested three levels deep at 1.2em ends up 1.728 times the base size.
Before
.badge {
font-size: 0.75rem;
padding: 3px 6px;
}After
.badge {
font-size: 0.75rem;
padding: 0.2em 0.5em;
}