Pixel360PX to EM formula
em = px ÷ parent font size
For font-size, an em is measured against the font size the element inherits from its parent. For other properties like padding, margin or gap, an em is measured against the element's own font size. In both cases the maths is the same: divide the pixels you want by the font size em is relative to.
Worked examples
- 14px caption in a 16px paragraph: 14 ÷ 16 = 0.875em
- 24px heading inside a 20px card: 24 ÷ 20 = 1.2em
- 12px badge inside 14px text: 12 ÷ 14 = 0.8571em
- 20px of padding on a button with 16px text: 20 ÷ 16 = 1.25em, which grows automatically if you make the button text larger
PX to EM conversion table (16px parent)
These values only hold when the parent font size is 16px. Change the parent size in the converter above for anything else.
| Pixels | EM | Pixels | EM |
|---|---|---|---|
| 8px | 0.5em | 20px | 1.25em |
| 10px | 0.625em | 22px | 1.375em |
| 12px | 0.75em | 24px | 1.5em |
| 13px | 0.8125em | 28px | 1.75em |
| 14px | 0.875em | 32px | 2em |
| 15px | 0.9375em | 36px | 2.25em |
| 16px | 1em | 40px | 2.5em |
| 18px | 1.125em | 48px | 3em |
How em compounds when you nest elements
Because each em refers to the parent, em font sizes multiply as you go deeper. Take this CSS, with the page at the default 16px:
.panel { font-size: 1.25em; }- One
.panelinside the body: 16 × 1.25 = 20px - A
.panelinside that panel: 20 × 1.25 = 25px - A third level: 25 × 1.25 = 31.25px
The same rule produces three different sizes. That's why converting px to em always needs the parent's real computed size, not the root. If you want 24px text inside the second panel (25px), you need 24 ÷ 25 = 0.96em, not 1.5em. When you don't want this behavior, use the px to rem converter instead, because rem always refers to the root and never compounds.
When em is the better unit
Compounding is a problem for page-wide type, but it's useful inside components. If a button's padding is 0.75em 1.25em, a small button and a large button keep the same proportions just by changing font-size. The same goes for icons sized at 1em so they match the text next to them, and for letter-spacing, which should scale with the type it belongs to.
MDN's font-size reference explains how em values are inherited and how they differ from rem.
Common mistakes
- Dividing by 16 out of habit. Only correct when the parent is 16px. Check the parent's computed font size in developer tools.
- Forgetting that padding uses the element's own size. If an element is set to
font-size: 1.5em(24px), thenpadding: 1emon the same element is 24px, not 16px. - Using em for layout widths. A sidebar set in em changes width whenever its font size changes. Rem or percentages are usually safer. To check what a rem value comes out to, use the rem to px converter.
Frequently asked questions
Is em relative to the parent or the element itself?
Both, depending on the property. For font-size, em is relative to the parent element's font size. For every other property, such as padding, margin or width, em is relative to the element's own computed font size.
How many pixels is 1em?
1em equals the font size it is measured against. With nothing changed it is 16px, but inside an element whose font size is 20px, 1em of padding is 20px.
Why is my em text getting bigger and bigger?
Em compounds. If a list item is 1.2em and you nest a list inside it, the inner items are 1.2 × 1.2 = 1.44 times the outer size. Switch font sizes to rem, or set nested items back to 1em.
When should I use em instead of rem?
Use em when a value should scale with the component's own text, such as button padding, icon sizes next to text, or letter-spacing. Use rem when a value should stay consistent across the page, such as most font sizes and layout spacing.
Should media queries use em?
Em in media queries is always based on the browser's default font size, not on any CSS you write, so 48em means 768px at the default 16px. Many developers use em breakpoints so layouts respond when users change their default font size.