PX to EM 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 from px to em, 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)

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; }
}