What is the formula for PX to EM?

Use em = px ÷ element font-size. EM depends on the local parent context, not the root.

Why does EM sometimes compound unexpectedly?

Nested elements inherit font-size changes, so EM-based spacing and type can scale repeatedly.

When should I choose EM over REM?

Use EM when component parts should scale with the component font-size. Use REM for global consistency.

Can I convert EM back to PX?

Yes. Use the inverse formula px = em × element font-size or open the EM to PX tool.

Is px to em converter free to use?

Yes. UnitCraft calculators are free and run entirely in your browser.

Converter · CSS unit tool

PX to EM converter

em = px ÷ elementFontSize. Unlike REM, EM is relative to the *current element's* computed font-size, not the root—so the same EM value can resolve to different pixels depending on where it sits in the cascade.

Pixels to convert

Enter the pixel value first.

Calculation base

Element font-size

Parent element's font-size

Result

1.2500 em

20px ÷ 16px = 1.2500em

CSS snippet

css

font-size: 1.2500em;

Keyboard tip: press Tab or Shift+Tab to switch fields.

The PX to EM formula

Divide the pixel value by the font-size of the element you are styling: em = px ÷ fontSizePx. If a button has `font-size: 14px`, then 8px of padding is 8 ÷ 14 ≈ 0.571em.

Because the divisor is the element's own font-size, EM is ideal for spacing that should grow and shrink together with the text inside a component.

EM vs REM: which to pick

REM gives you one global anchor (the root), so a value means the same thing everywhere—great for design tokens and layout.

EM is context-relative, which makes it perfect for component-internal rhythm (icon gaps, button padding) but risky for deep layouts, where nested EMs compound unexpectedly.

Watch out for compounding

When an element sets a font-size in EM and its parent also uses EM, the values multiply down the tree. A `1.2em` heading inside a `1.2em` section renders at 1.44× the grandparent size.

If spacing suddenly looks too large, inspect the chain of font-sizes above the element—an EM somewhere up the cascade is usually the cause.

Copy-ready examples

Chip padding that scales with text

css

.badge {
  font-size: 14px;
  padding: 0.357em 0.571em; /* 5px 8px at 14px */
}

Frequently asked questions

What is the formula for PX to EM?: Use em = px ÷ element font-size. EM depends on the local parent context, not the root.
Why does EM sometimes compound unexpectedly?: Nested elements inherit font-size changes, so EM-based spacing and type can scale repeatedly.
When should I choose EM over REM?: Use EM when component parts should scale with the component font-size. Use REM for global consistency.
Can I convert EM back to PX?: Yes. Use the inverse formula px = em × element font-size or open the EM to PX tool.
Is px to em converter free to use?: Yes. UnitCraft calculators are free and run entirely in your browser.