Pixels to em
Convert px to em using a parent element's font size. em is relative to the immediate parent — useful when a button's padding should scale with its label text, or a nested list indent follows local body size. Formula: em = px ÷ parentFontSizePx.
Pixels
Parent font size (px)
Result
1em
How to convert px to em
1. Identify the parent element's font size in px (e.g. 18 px).
2. Enter the px value to convert (e.g. 9 px letter-spacing).
3. Read em result (9 ÷ 18 = 0.5 em).
4. Apply in CSS on the child element scoped to that parent context.
Px to em examples
Button padding
Parent font 16 px; vertical padding 8 px → 0.5 em. Scales if parent becomes 18 px on large screens.
Nested heading
Section font 20 px; subheading 24 px design → 1.2 em relative to section, not root.
Icon alignment
Inline icon 14 px with 16 px text line → 0.875 em icon box aligns to text metrics.
When to convert px to em
• When component internals should scale with local font size changes.
• When you style rich text where headings sit inside differently sized containers.
• When legacy CSS used em and you map new px designs into the same system.
When to choose something else
• When you want site-wide consistent spacing — rem from root is simpler.
• When deep nesting causes em compounding bugs — prefer rem for margins.
• When you need viewport-relative sizing — use vw/vh.
Avoiding em compounding pitfalls
Deeply nested menus with font-size: 0.9em at each level shrink text unexpectedly. Prefer rem for font-size on structural levels; use em for local padding tied to one parent. Document parent assumptions in design tokens.
em for media queries?
Media query em units historically referenced browser default (16 px), not component parent. Modern responsive design often uses rem or px breakpoints — know which context your stylesheet targets.
Frequently asked questions
What is the difference between em and rem?
em references parent font size; rem references root (html) font size only.
Why does nested em compound?
Each level multiplies: 1.2 em inside 1.2 em parent = 1.44 × root if both apply to font-size chains.
Formula?
em = px ÷ parentFontSizePx. Always use the direct parent's computed font size.
Padding in em?
Yes — padding/margin in em scale with the element's own font-size (for margin/padding, spec uses element font size).
When did em originate?
Traditionally "width of capital M" in metal type; now defined relative to font-size in CSS.
Is data uploaded?
No. Conversion runs locally.