PX to EM Converter

Free px to em converter. Enter any pixel value, set your parent font size, and get the em value instantly. Formula: em = px ÷ parent font size. No signup needed.

px
px
1
em

Formula

em = px ÷ parent font size

Quick Reference Table

Pixels (px)
EM
8 px
0.5 em
10 px
0.625 em
12 px
0.75 em
14 px
0.875 em
16 px
1 em
18 px
1.125 em
20 px
1.25 em
24 px
1.5 em
28 px
1.75 em
32 px
2 em
36 px
2.25 em
40 px
2.5 em
48 px
3 em
56 px
3.5 em
64 px
4 em
72 px
4.5 em

How EM Units Actually Work

The em unit is one of the oldest relative units in CSS. It takes its name from typography, where an "em" was the width of the capital letter M in the current typeface. In CSS, 1em simply equals the computed font-size of the element's parent. MDN Web Docs defines it as the computed font-size of the element on which it is used.

This parent-relative behavior is what makes em powerful and, at the same time, confusing. When you write padding: 1.5em on a button, the actual padding depends on what font size that button has. Change the font size, and the padding changes with it. This is exactly the behavior you want for components that need to scale as a unit.

But here is where it gets tricky: when you use em for the font-size property itself, it references the parent's font size, not the element's own size. And when you nest multiple levels, each em multiplies on top of the previous one. This is called the "cascade effect," and it is the main reason many developers prefer rem for font sizes.

The EM Cascade Effect (Visualized)

This is the number one thing that trips people up with em. Watch how the same 1.2em declaration produces different pixel values at each nesting level:

Level 0: html root

font-size: 16px

16px
Level 1: parent div

font-size: 1.2em

19.2px
Level 2: nested div

font-size: 1.2em

23.04px
Level 3: deeply nested

font-size: 1.2em

27.65px

Each level multiplies: 16 x 1.2 = 19.2, then 19.2 x 1.2 = 23.04, then 23.04 x 1.2 = 27.65. The same CSS declaration produces a bigger font at every level. This is why rem is safer for font sizes in complex layouts.

EM vs REM: When to Use Each

Property
Use EM
Use REM
Font size
Only in isolated components
Recommended
Button padding
Recommended
Works fine too
Layout spacing
Avoid (unpredictable)
Recommended
Media queries
Works (uses browser default)
Also works
Icon sizing
Great (scales with text)
Fixed size

Practical Code Examples

Scalable Button Component (Best Use of EM)
.btn {
  font-size: 1rem;        /* base: 16px */
  padding: 0.5em 1.25em;  /* 8px 20px - scales with font */
  border-radius: 0.25em;  /* 4px - scales with font */
}

.btn-lg {
  font-size: 1.25rem;     /* 20px */
  /* padding automatically becomes 10px 25px */
  /* border-radius becomes 5px */
  /* Everything scales proportionally! */
}

.btn-sm {
  font-size: 0.875rem;    /* 14px */
  /* padding becomes 7px 17.5px */
  /* No need to redeclare padding or radius */
}
Icons That Match Text Size
.icon {
  width: 1em;   /* Same size as the text */
  height: 1em;
}

/* Icon in a heading = big icon */
h1 { font-size: 2rem; }
h1 .icon { /* 32px x 32px */ }

/* Icon in body text = small icon */
p { font-size: 1rem; }
p .icon { /* 16px x 16px */ }
Avoid: Using EM for Font-Size in Nested Elements
/* This causes the cascade problem */
.list { font-size: 0.9em; }
.list .list { font-size: 0.9em; }
/* Second list: 0.9 x 0.9 = 0.81em of root */
/* Third list: 0.81 x 0.9 = 0.729em of root */
/* Text keeps shrinking! */

/* Fix: use rem for font-sizes */
.list { font-size: 0.9rem; }
/* Now every nested list is 0.9rem, period. */

The Modern Approach: REM for Size, EM for Space

Most senior developers today follow a simple pattern: use rem for all font-size declarations (to avoid the cascade problem), and use em for padding, margin, and gaps within components (so spacing scales proportionally with text).

This gives you the best of both worlds. Your text sizes are predictable and accessible (rem), while your component spacing adapts automatically when you create different size variants (em). A large button with bigger text automatically gets more padding. A small label with tiny text gets tighter spacing. All from a single CSS class.

If you are just getting started with relative units, begin with rem everywhere. Once you are comfortable, start using em for padding and margins inside reusable components. That is the pattern most CSS frameworks like Tailwind and Bootstrap follow internally.

Frequently asked questions

How do I convert px to em?
Divide the pixel value by the parent element's font size. If the parent is 16px and you want 24px, the calculation is 24 / 16 = 1.5em.
What is the difference between em and rem?
Em is relative to the nearest parent element's font size. Rem is always relative to the root html element. Em compounds when nested (an em inside an em multiplies), while rem stays consistent everywhere on the page.
What is 1em in pixels?
It depends on the parent. If the parent element has font-size: 16px, then 1em = 16px. If the parent is 20px, then 1em = 20px. The pixel value of 1em changes based on context.
When should I use em instead of rem?
Use em when you want an element to scale relative to its parent. The classic example is button padding: if you set padding in em, the padding grows proportionally when you increase the button's font size.
What is the em cascade problem?
When you nest elements that use em for font-size, the values multiply. A 1.2em font inside another 1.2em element becomes 1.44em (1.2 times 1.2) relative to the root. This compounding makes em tricky for font sizes in deeply nested structures.
Can I mix em and rem in the same project?
Yes, and many experienced developers do. A common approach is rem for font sizes (consistent across the page) and em for padding and margins within components (scales with the component's text size).
How does em work with padding and margin?
When you use em for padding or margin, it is relative to the font-size of the element itself, not the parent. So an element with font-size: 20px and padding: 1em will have 20px of padding.
What happens to em values in media queries?
In media queries, em is relative to the browser's default font size (usually 16px), not the parent element. A media query at 48em triggers at 768px regardless of any font-size declarations in your CSS.
Is em supported in all browsers?
Yes. Em has been part of CSS since the very beginning. Every browser, including mobile browsers and older versions of Internet Explorer, supports em units fully.
How do I find the parent font size for conversion?
In Chrome DevTools, right-click the parent element, click Inspect, and look at the Computed tab for the font-size property. That number is what you divide your pixel value by to get em.
Should I use em for responsive font sizes?
Generally, rem is better for font sizes because it avoids the cascade problem. But em works well for setting font sizes within a component where you want everything to scale together when the parent size changes.
What is the default em value if no font size is set?
If no font size is explicitly set on the parent, the browser default of 16px is inherited. So 1em would equal 16px in that case, the same as 1rem.

Related tools