PX to EM Converter
Runs in your browser — your data is never uploaded.
Convert pixels to em against the parent element’s font size. em is the right unit when you want something to scale with its own component rather than the page — padding inside a button, say, that should grow when the button’s text does. The catch is that em compounds through nesting, which this tool spells out alongside the number.
How to use PX to EM
- 1
Enter the pixel value.
- 2
Set the parent element’s font size in pixels.
- 3
Copy the em value or the CSS line.
Share
Embed this tool on your site
Paste this where you want the tool to appear. It runs entirely in your visitor's browser — no uploads, no account, no tracking.
Please keep the attribution line — it's what keeps these tools free.
Need a different size, a dark theme, or a different tool? Build an embed lets you preview it first.
Frequently asked questions
When should I use em rather than rem?+
When the value should scale with the component it lives in. Padding, letter-spacing and border-radius on a button all read better in em, because they stay proportional when the button’s font size changes. For page layout and typography scale, rem is safer.
What does “em compounds” mean?+
em resolves against the parent’s computed font size, so nesting multiplies. A 0.9em list inside a 0.9em list inside a 0.9em section renders at 0.73 of the base, not 0.9 — a common cause of text that mysteriously shrinks the deeper it sits.
Does em mean the same thing for font-size and padding?+
Not quite. For font-size it resolves against the *parent*; for every other property it resolves against the *element’s own* font size. That difference catches people out constantly.