Px to Em Converter

Convert Pixels to Em

Enter a pixel value to convert it to em units. The conversion divides your pixel value by the parent element font size (default 16px). Unlike rem, em follows the nearest parent, which makes it ideal for components that scale as a unit.

Common Pixel to Em Values (16px Parent)

The Compounding Trap

em multiplies down the tree. Three nested levels of 1.2em produce 1.728em at the leaf (1.2 x 1.2 x 1.2). This surprises developers styling nested lists and menus. Two fixes: set the multiplying factor on one level only, or use rem for the outer containers and em only inside the leaf component.

How to Use

1. The tool opens with 16px pre-filled, converting to 1em
2. Type any pixel value in the input field
3. Change the parent font size to match your DevTools computed value
4. Copy the em value from the results table

Real-World Example

A button has 16px text and the design calls for 12px vertical padding. 12 / 16 = 0.75em, so padding: 0.75em scales automatically if the button text grows to 20px. Fixed px padding would stay small while the text grows.

For root relative units try Px to Rem, or see every unit in the full CSS Units Converter.