PX to EM Converter

What Is EM in CSS?

EM is a relative CSS unit equal to the computed font size of the element itself (for font-size) or its parent (for other properties like padding and margin). If a parent has font-size: 16px, then 1em = 16px for lengths on child elements.

How PX to EM Conversion Works

Divide your pixel value by the parent's font size:

em = px ÷ parent font size

Example: with a 16px parent, 20px → 1.25em and 32px → 2em. If the parent is 18px instead, 27px → 1.5em (27 ÷ 18).

Why EM Compounds

Nested em values multiply. A grandparent at 1.2em with a child at 1.2em produces text that is 1.44× the root — not 1.2×. This makes em powerful for self-contained components but risky for page-wide layout. REM avoids this by always referencing the root.

Common PX to EM Examples (16px parent)

• 12px → 0.75em
• 14px → 0.875em
• 16px → 1em
• 18px → 1.125em
• 24px → 1.5em
• 32px → 2em

Best Practices

• Use rem for page-level spacing and typography.
• Use em inside components that should scale with their parent's text size.
• Avoid deep em nesting without a clear mental model of the cascade.
• Always know the parent's computed font-size before converting px to em.