PX to EM Converter
Convert pixel values to em units and em values back to pixels. Supports custom parent font size.
What is EM in CSS?
EM is a CSS unit that is relative to the font size of its parent element. If a parent element has a font size of 16px, then 1em equals 16px for any child inside it. If the parent is 20px, then 1em equals 20px. This makes EM a contextual unit — its actual value changes depending on where in the DOM it is used.
The name EM comes from typography, where it historically referred to the width of the capital letter "M" in a given typeface. In CSS it has been redefined to mean the current font size of the element's context.
How to Convert PX to EM
Divide the pixel value by the parent element's font size:
Examples at 16px parent:
12px / 16 = 0.75em
10px / 16 = 0.625em
32px / 16 = 2em
How to Convert EM to PX
Multiply the em value by the parent element's font size:
Examples at 16px parent:
0.75em x 16 = 12px
2em x 16 = 32px
0.875em x 16 = 14px
PX to EM Conversion Table (16px parent)
| PX | EM | Common Use |
|---|---|---|
| 8px | 0.5em | Extra small spacing |
| 10px | 0.625em | Small text, captions |
| 12px | 0.75em | Small labels |
| 14px | 0.875em | Secondary text |
| 16px | 1em | Base body text |
| 18px | 1.125em | Slightly larger body |
| 20px | 1.25em | Lead text |
| 24px | 1.5em | Subheadings |
| 32px | 2em | Section headings |
| 48px | 3em | Display headings |
The EM Compounding Problem
The biggest pitfall of EM is that it compounds when nested. If a parent has font-size: 0.75em and a child also has font-size: 0.75em, the child's actual size is not 0.75em of the root — it is 0.75 x 0.75 = 0.5625em of the root.
.parent { font-size: 0.75em; } /* = 12px */
.parent .child { font-size: 0.75em; } /* = 9px, NOT 12px */
.parent .child .grandchild { font-size: 0.75em; } /* = 6.75px */
This compounding effect is why EM is generally not recommended for font sizes in modern CSS. Use REM for font sizes instead — REM always refers to the root and never compounds.
When to Use EM (and When Not To)
Good use cases for EM
- Button padding and margin — Padding defined in em scales with the button's own font size. A larger button text automatically gets more padding without extra CSS.
- Component-level spacing — When you want internal spacing to scale with the component's font size, not the root.
- Media queries — Em-based breakpoints respond to user browser font size changes.
@media (min-width: 48em)is more accessible than48px. - Icon sizing alongside text — An icon sized in em will scale with the surrounding text automatically.
Avoid EM for
- Font sizes — Compounding makes nested font sizes unpredictable. Use REM instead.
- Global layout dimensions — Use REM or percentage for layout so sizing is consistent regardless of parent context.
- Anything deeply nested — The more levels of EM nesting, the harder it is to reason about actual rendered sizes.
EM vs REM — Key Differences
| Property | EM | REM |
|---|---|---|
| Relative to | Parent element font size | Root (<html>) font size |
| Compounds when nested | Yes | No |
| Predictability | Context-dependent | Always consistent |
| Best for | Component-level spacing | Font sizes, global spacing |
| Affected by parent font size | Yes | No |
| Respects user browser settings | Yes (indirectly) | Yes (directly) |
Practical Example — Button Scaling with EM
font-size: 1rem; /* base size */
padding: 0.5em 1em; /* 8px 16px at 1rem */
border-radius: 0.25em;
}
.btn-lg {
font-size: 1.25rem; /* larger text */
/* padding stays 0.5em 1em but now = 10px 20px */
}
How to Use This Converter
- Select PX to EM or EM to PX using the tabs
- Enter your value and set the Parent Font Size — default is 16px
- The result updates instantly — click Copy Result to use in your CSS
- For multiple values at once, use the Bulk Convert section — one value per line
Frequently Asked Questions
What is 1em in pixels?
1em equals the font size of the parent element. If the parent has font-size: 16px, then 1em = 16px. There is no fixed pixel value for 1em — it always depends on the context.
Is em the same as rem?
No. EM is relative to the parent element's font size and compounds when nested. REM is relative to the root element (<html>) and is always consistent regardless of nesting depth. For font sizes, REM is almost always the better choice.
Why does my em font size look wrong when nested?
This is the compounding problem. If a parent element has font-size: 0.875em and the child also has font-size: 0.875em, the child's actual size is 0.875 x 0.875 = 0.766em of the grandparent — smaller than intended. Switch to REM for font sizes to avoid this entirely.
Should I use em or rem for padding and margin?
It depends on the intent. Use EM if you want padding to scale with the component's own font size. Use REM if you want spacing to be consistent regardless of font context.
Does changing the parent font size affect em values?
Yes, that is the definition of EM. If you change a parent element's font size, all EM values inside it recalculate relative to the new size.