PX to EM Converter

Convert pixel values to em units. Set the parent font size to get accurate conversions for your context.

Parent font-size

px Absolute pixels

em Relative to parent

em = px ÷ 16

PX to EM Conversion Table

Complete reference: pixels 1–100 converted to em.

px	em

How to Convert PX to EM

The em unit is relative to the parent element's font size. The conversion formula is:

em = px ÷ parent-font-size

If the parent element has a font-size of 16px (the default), then 24px = 1.5em. However, the critical difference between em and rem is context: em values are relative to the parent, not the root. This means the same em value can represent different pixel sizes depending on where it appears in your DOM tree.

For example, if a div has font-size: 20px and contains a paragraph set to 1.5em, that paragraph renders at 30px (1.5 × 20). If that same paragraph were nested inside an element with font-size: 14px, it would render at 21px instead.

When to Use EM Units

While rem is generally preferred for global sizing, em has specific advantages:

Component-relative sizing: When building self-contained components (buttons, cards, badges), em-based padding and margins scale proportionally if the component's font size changes.
Inline spacing: Properties like letter-spacing, word-spacing, and text-indent often make more sense in em because they should scale with the text they affect.
Media query breakpoints: Some developers prefer em for media queries because they respond to the user's font-size preference, though rem works equally well in modern browsers.
Icon sizing: Setting icon width/height to 1em makes them automatically match the surrounding text size.

EM vs REM: Key Differences

The most important difference: em compounds, rem doesn't. If you set font-size: 1.2em on nested elements, each level grows: the first child is 1.2× the parent, the grandchild is 1.44× (1.2 × 1.2), and so on. This cascading behavior is a common source of bugs.

REM always references the root element, so 1.5rem is always the same pixel value regardless of nesting depth. Use em when you intentionally want relative-to-parent scaling; use rem for everything else.

/* Em for component-internal spacing */
.btn {
  font-size: 1rem;
  padding: 0.5em 1em;  /* scales with button font-size */
}
.btn--large {
  font-size: 1.25rem;
  /* padding automatically grows to match */
}

Frequently Asked Questions

What is the difference between em and rem?

Em is relative to the parent element's font size, while rem is relative to the root (html) element's font size. This means em values can compound when nested, but rem values stay consistent regardless of nesting.

Is 1em always equal to 16px?

No. 1em equals the font-size of the parent element. If the parent has font-size: 20px, then 1em = 20px for that element. The 16px value only applies when the parent inherits the default browser font size.

Why do em values compound?

Because each element's em calculation uses its parent's computed font-size. If you set font-size: 1.5em on nested elements, the first child is 24px (1.5 × 16), the grandchild is 36px (1.5 × 24), and so on.

Should I use em or rem for padding?

Use em for padding when you want it to scale with the element's own font size (like buttons). Use rem for padding when you want consistent spacing regardless of text size (like layout containers).