PX to EM Converter
Result: 1em
Calculation based on a root font-size of 16 pixel.
How to Use the converter?
Select the input field labeled "Pixels"
Change the number in an input field
Converter will automatically convert
Support Our Work
Your support powers this tool for developers everywhere.
You May Like These Websites
Find the perfect website for your needs with our curated list of top-rated options.
Difference Between EM and PX
EM is a relative CSS unit, but unlike REM, it's relative to the font-size of its own element, not the root element. This means an em value can compound: if a parent has font-size: 1.5em and a child also uses em units, the child's actual size is calculated relative to the parent's already-scaled font-size, not the root.
Pixels (px), by contrast, are an absolute unit. A px value stays fixed regardless of any parent or ancestor font-size settings, which makes calculations predictable but non-scalable.
Converting PX to EM is common when building components that should scale with their local context — for example, a card component where padding and icon sizes should grow if the card's own font-size increases, without affecting sibling components elsewhere on the page.
By default, most browsers set the root font-size to 16px, so 16px = 1em applies when no parent has overridden the font-size. But keep in mind: unlike REM, the actual pixel equivalent of an EM value depends entirely on its nesting context.
Common PX to EM Conversions
8px
0.5em
12px
0.75em
16px
1em
20px
1.25em
22px
1.375em
24px
1.5em
32px
2em
132px
8.25em
Quick Conversion Tips
Converting PX to EM
Divide the pixel value by the font-size of the current element (16px by default). Example: 24px ÷ 16px = 1.5em
Converting EM to PX
Multiply the EM value by the font-size of the current element (16px by default). Example: 1.5em × 16px = 24px
Learn More About CSS Units
PX vs Inches, MM, and CM
Learn how pixels relate to inches, millimeters, and centimeters using the CSS 96 DPI standard, and avoid the most common print-design conversion mistake.
Read our comprehensive guide →Frequently Asked Questions
How do I convert PX to EM?
Divide the pixel value by the font-size of the element's parent (16px by default). For example, 24px ÷ 16px = 1.5em. Use the converter above for instant results based on the default 16px root size.
What is the difference between EM and REM?
REM is always relative to the root (<html>) font-size, so it never compounds. EM is relative to the current element's own font-size, which means nested elements using EM can compound and produce unexpected sizes.
When should I use EM instead of PX?
Use EM for component-level properties like padding, margin, or icon sizing that should scale proportionally with that component's own font-size, such as buttons or cards with adjustable text sizes.
Why does EM sometimes give unexpected results?
Because EM compounds through nested elements. If a parent element has font-size: 1.2em and a child also uses em units, the child's calculated size multiplies against the parent's already-scaled value, not the root font-size.
Do all browsers support EM units?
Yes, EM units are supported by all modern browsers, including Chrome, Firefox, Safari, and Edge, with full compatibility across desktop and mobile.