px to em converter
Convert px to em (parent-relative) — useful for component-scoped sizing.
Runs 100% in your browserHow to convert px to em
- Enter the parent font-size. The element's computed font-size — usually 16px on the body.
- Paste px values. One per line. em equivalents appear instantly.
em compounds — be careful
Because em is relative to the current element, em-based sizes inside an em-based
parent multiply. 0.875em inside an element that is itself 0.875em of its
parent equals 0.766em of the grandparent — easy to lose track of in a deep
component tree. Use em where the relative scaling is the goal (a label whose padding tracks its
own font-size), and rem where you want stable spacing across nesting.
Frequently asked questions
- A CSS length unit equal to the current element's computed font-size — not the root's. Nested em values multiply, which is why em is useful for relative sizing inside a component but tricky for global typography.
- Use em when a value should scale with its parent — for example, an icon next to text that should match the text size, or padding on a button that should grow with the button's font.
- The computed font-size of the element where the em will be applied. If the parent is the body and you haven't overridden anything, this is typically 16px.