Converter · CSS unit tool
EM to PX calculator
px = em × elementFontSize. EM is measured against the element's own computed font-size, so set that base below and read off the exact pixel value DevTools would show.
Enter the EM value first.
Calculation base
Parent element's font-size
Result
320.00 px
20em × 16px = 320.00px
Keyboard tip: press Tab or Shift+Tab to switch fields.
The EM to PX formula
Multiply the EM value by the element's font-size: px = em × fontSizePx. At a 16px element font, 1.5em = 24px; at a 14px font, the same 1.5em = 21px.
Note the divisor here is the *element* font-size, not the document root—this is what separates EM from REM.
Aligning with DevTools
When you file a pixel-perfect bug, the browser's computed-styles panel reports resolved pixels. Convert the authored EM back to px so your report matches what QA sees on screen.
If your converted value disagrees with DevTools, the element likely inherits a different font-size than you assumed—check the cascade.
Copy-ready examples
/* element font-size: 18px */ /* margin-bottom: 1.5em → 27px */
Frequently asked questions
- Does the root font-size matter here?
- No—EM to PX uses only the element's own font-size. The root affects REM, not EM.
- Can I convert EM back to PX exactly?
- Yes. px = em × element font-size is the exact inverse of px ÷ element font-size, so round trips are lossless.
- Is em to px calculator free to use?
- Yes. UnitCraft calculators are free and run entirely in your browser.
- Does UnitCraft send my input values to a server?
- No. Calculator inputs are processed locally in the browser tab.
- Can I copy the generated CSS output?
- Yes. Each tool provides copy-ready snippets so you can paste values directly into code.