The PX to EM Formula
EM conversion depends on the parent element's font-size. Unlike REM, EM isn't always relative to the same value—it changes based on context.
Conversion Formula
PX to EM: em = px ÷ parent-font-size
EM to PX: px = em × parent-font-size
Example: For a parent at 20px, 30px = 30 ÷ 20 = 1.5em
The Compounding Problem
EM values multiply through nested elements. This is both EM's superpower and its most common pitfall.
html { font-size: 16px; } /* Base: 16px */
.container { font-size: 1.25em; } /* 16 × 1.25 = 20px */
.card { font-size: 1.25em; } /* 20 × 1.25 = 25px */
.card-title { font-size: 1.25em; } /* 25 × 1.25 = 31.25px */
Each level multiplies: 1.25 × 1.25 × 1.25 = 1.953. The card title ends up nearly 2× the root size, even though each level only asked for 1.25em.
Worked Example: Accidental Giant Text
You set paragraphs to 1.2em for slightly larger text. But in a three-level nested component:
- Level 1: 16px × 1.2 = 19.2px
- Level 2: 19.2px × 1.2 = 23px
- Level 3: 23px × 1.2 = 27.6px
The innermost paragraph is 72% larger than intended. This is why most developers use REM for font-sizes and reserve EM for padding/margins.
When EM Makes Sense
EM shines when you want scaling relative to the current font-size:
.button {
font-size: 1rem; /* REM for consistent size */
padding: 0.5em 1em; /* EM: scales with font-size */
}
.button--large {
font-size: 1.25rem; /* Larger button text */
padding: 0.5em 1em; /* Padding automatically scales! */
}
The padding stays proportional to the button text. A 0.5em padding is always "half the font-size," whether the button is small or large.
EM vs REM Comparison
| Property | Recommended Unit | Reason |
|---|---|---|
| font-size | REM | Avoids compounding in nested elements |
| Button padding | EM | Scales with button's font-size |
| Section margins | REM | Consistent regardless of section content |
| line-height | Unitless or EM | Relative to current font-size |
| Media queries | EM | Respects user's font-size preferences |
Media Queries in EM
Using EM for media queries makes your breakpoints accessible. When users increase their browser's default font size, EM-based breakpoints adjust accordingly.
/* 768px ÷ 16 = 48em */
@media (min-width: 48em) {
.container { max-width: 720px; }
}
/* 1024px ÷ 16 = 64em */
@media (min-width: 64em) {
.container { max-width: 960px; }
}
Frequently Asked Questions
What is EM in CSS?
EM is a relative unit based on the parent element's font-size. If a parent has font-size: 20px, then 1em in that context equals 20px. The name comes from typography—historically, an "em" was the width of the capital letter M in a given typeface.
How do I convert PX to EM?
Divide the pixel value by the parent element's font-size. For a parent at 16px: 24px ÷ 16 = 1.5em. For a parent at 20px: 24px ÷ 20 = 1.2em. The context matters—the same pixel value converts to different EM values depending on the parent.
What's the difference between EM and REM?
EM is relative to the parent element and compounds in nested elements (1.2em × 1.2em = 1.44× root). REM is always relative to the root html element and never compounds. Most modern CSS uses REM for font-sizes and EM for padding/margins that should scale with text.
Why do EM values compound?
Each EM value multiplies against its parent's computed font-size. If a parent is 1.5em (24px from 16px root), a child at 1.5em becomes 24px × 1.5 = 36px. Three levels at 1.2em each: 1.2 × 1.2 × 1.2 = 1.728× the root. This is by design, but often unexpected.
When should I use EM instead of REM?
Use EM when you want sizing relative to the current element's font-size: button padding (0.5em 1em), icon sizing inside text, line-height, and media query breakpoints. Use REM when you want consistent sizing regardless of context: font-sizes, section margins, component widths.
How do I prevent EM compounding issues?
Use REM for font-size properties to avoid compounding entirely. Reserve EM for non-font properties like padding and margin where you actually want scaling relative to text size. This pattern gives you the benefits of both: consistent text sizes plus proportional spacing.