PX to EM converter

What em is relative to

For every property except one, em resolves against the computed font-size of the element itself. For font-size, it resolves against the parent’s font size. That single exception is the source of nearly all em confusion, and it is worth reading twice.

.card {
  font-size: 1.25em;   /* 1.25 × the PARENT's size */
  padding: 1em;        /* 1 × THIS element's size, i.e. 1.25 × parent */
}

Set the parent font size field above to whatever the containing element computes to — read it from the Computed panel in devtools — and the conversion matches what the browser will do.

The compounding trap

em multiplies down the tree, and inherited rules multiply with it.

ul { font-size: 0.9em; }

Level 1: 16px × 0.9 = 14.4px
Level 2: 14.4 × 0.9 = 12.96px
Level 3: 12.96 × 0.9 = 11.66px
Level 4: 11.66 × 0.9 = 10.5px   ← unreadable

Nothing here is a bug; it is em working exactly as specified. The fix is either to scope the rule so it cannot nest (:not(ul ul), or a class rather than an element selector) or to use rem, which is immune because it always resolves against the root.

Where em is the right choice

Component-internal measurements that should track the component’s own text size. Define a button once in em and it works at every size, because everything inside it scales together:

.button {
  font-size: 1rem;        /* the one dial */
  padding: 0.625em 1em;   /* 10px / 16px at this size */
  border-radius: 0.375em;
  gap: 0.5em;
}

.button--sm { font-size: 0.875rem; }  /* everything shrinks proportionally */
.button--lg { font-size: 1.125rem; }  /* everything grows proportionally */

Two size modifiers, one declaration each. In rem you would have to restate the padding, radius and gap for every size.

Other good uses

• Icon sizing. width: 1em; height: 1em makes an inline SVG match the surrounding text exactly, at any size.
• Media queries. Inside a media query em resolves against the browser’s initial font size, never your declared root, which makes em breakpoints more predictable than rem ones in a project that changes the root size.
• Text indentation and hanging punctuation, which should be proportional to the type by definition.

The bulk rewrite cannot know your tree

When you paste a stylesheet, the converter applies the single parent font size you set at the top to every value it rewrites. It has no way to know that .card p sits inside something that set 1.25em — that depends on the DOM, not the stylesheet. For a file with several nested type contexts, convert one section at a time with the right parent size for each, or use the property filter to limit the rewrite to a single property.