PX to EM and EM to PX in CSS: A Complete Guide

The em unit is one of the oldest relative units in CSS. Unlike px, which is a fixed size, em scales based on the font size of the element it is applied to. This makes it powerful for building self-contained components, but it also introduces a compounding behavior that catches many developers off guard.

This guide explains exactly how em works, how to convert between px and em in both directions, when to use it over rem, and how to avoid its most common pitfall.

What is em?

The em unit is relative to the font size of the element itself. If an element has a font size of 16px, then 1em = 16px for that element. If it has a font size of 20px, then 1em = 20px.

For most properties (padding, margin, width), em is relative to the element's own font size. For the font-size property itself, em is relative to the parent element's font size.

.parent {
  font-size: 20px;
}

.child {
  font-size: 0.8em;   /* 0.8 × 20px = 16px */
  padding: 1em;     /* 1 × 16px = 16px (uses child's own font-size) */
  margin: 0.5em;   /* 0.5 × 16px = 8px */
}

The px to em conversion formula

Converting a px value to em requires knowing the font size of the parent element (for font-size) or the element itself (for other properties).

em = px ÷ parent (or element) font size

/* Parent font size is 16px */
12px ÷ 16 = 0.75em
16px ÷ 16 = 1em
24px ÷ 16 = 1.5em

/* Parent font size is 20px */
16px ÷ 20 = 0.8em
24px ÷ 20 = 1.2em

The parent font size is the variable that changes everything. This is what makes em contextual: the same em value produces different pixel sizes in different parts of your layout.

Common conversion table (base 16px)

Converting EM to PX

The reverse calculation matters just as much day to day. Auditing an inherited stylesheet, reviewing a design handoff, or reading someone else's component library, you'll run into a raw em value with no idea what it actually renders as until you multiply it back out.

px = em × parent (or element) font size

/* Parent font size is 16px */
0.75em × 16 = 12px
1em × 16 = 16px
1.5em × 16 = 24px

/* Parent font size is 20px */
0.8em × 20 = 16px
1.2em × 20 = 24px

EM to PX conversion table (16px base)

This is the same set of values from the table above, mapped in reverse.

The compounding problem

The most dangerous behavior of em is that it compounds in nested elements. Each level of nesting multiplies the font size further, often producing sizes you did not intend.

ul { font-size: 0.9em; }

/*
  Level 1 ul: 0.9 × 16px = 14.4px
  Level 2 ul: 0.9 × 14.4px = 12.96px
  Level 3 ul: 0.9 × 12.96px = 11.66px
  Level 4 ul: 0.9 × 11.66px = 10.5px  ← getting tiny fast
*/

em vs rem: when to use each

The difference comes down to what you want the value to be relative to.

Use em for component-scoped spacing

The best use case for em is padding and margin inside a self-contained component where you want spacing to automatically scale when the font size changes.

.button {
  font-size: 1rem;         /* set the base in rem */
  padding: 0.625em 1.25em; /* padding scales with button font size */
  border-radius: 0.25em;   /* scales with font size too */
}

.button--large {
  font-size: 1.25rem;
  /* padding and border-radius automatically scale up, no override needed */
}

Use rem for font sizes and layout

For font sizes in your type scale, use rem. It stays consistent no matter how deeply an element is nested, and it respects the user's browser font size preference.

h1 { font-size: 2.5rem; }    /* always 40px at 16px root */
h2 { font-size: 2rem; }      /* always 32px */
p  { font-size: 1rem; }      /* always 16px */
small { font-size: 0.875rem; } /* always 14px */

Practical pattern: combining em and rem

The most effective approach is using both units together: rem for the font size anchor and em for the proportional spacing within a component.

.card {
  font-size: 1rem;       /* anchor in rem */
  padding: 1.5em;       /* 24px at default, scales if font-size changes */
  border-radius: 0.5em; /* 8px, proportional */
  gap: 1em;            /* internal spacing stays proportional */
}

.card--compact {
  font-size: 0.875rem; /* shrink everything by changing one value */
}

Media queries: em or px?

For media query breakpoints, em is actually the most reliable unit. Unlike px, em-based media queries respond correctly when a user has changed their browser's default font size.

/* 768px ÷ 16 = 48em */
@media (max-width: 48em) {
  .layout { grid-template-columns: 1fr; }
}

/* 1024px ÷ 16 = 64em */
@media (max-width: 64em) {
  .sidebar { display: none; }
}

Frequently asked questions

Does 1em always equal 16 pixels?

Only when the parent element's font size is 16px, which happens to be the browser default. Change the parent's font size and 1em changes with it: at a 20px parent, 1em equals 20px instead. There is no fixed pixel value for em on its own, it always depends on context.

How do you convert em back to px?

Multiply the em value by the parent element's font size: px = em × parent font size. At a 16px parent, 1.5em × 16 = 24px, and 0.9em × 16 = 14.4px.

What is 0.9em in pixels?

At the default 16px parent font size, 0.9em equals 14.4px (0.9 × 16). If the parent uses a different font size, multiply 0.9 by that value instead of 16.

Is em the same as ex?

No. Both are relative to font metrics, but em is relative to font size while ex is relative to the x-height of the current font, historically the height of a lowercase "x." Ex is rarely used in modern CSS because x-height varies significantly between fonts, making it unpredictable. Em is by far the more common and reliable choice.

Why do you need the parent font size to convert px to em?

Because em is not a fixed unit, px is. A given em value has no pixel equivalent on its own, it only means something relative to the font size of the element it is being measured against: the parent for font-size, or the element itself for properties like padding and margin. That's the tradeoff for the flexibility em gives you.

Can I convert px to em automatically in Sass or SCSS?

Yes. A small reusable function handles it: @function em($px, $context: 16) { @return ($px / $context) * 1em; }. Calling em(24) with the default 16px context returns 1.5em.