How do I convert px to em?

Divide the pixel value by the parent element's font size. If the parent is 16px, then 24px ÷ 16 = 1.5em.

What is the difference between em and rem?

An em is relative to the font size of the parent element, while a rem is always relative to the root (html) font size. Ems compound through nesting; rems do not.

Why is the default parent font size 16?

Browsers use a default root font size of 16px, and unless a parent overrides it, that value cascades down. So 16 is a sensible starting divisor, but set it to your actual parent font size for accuracy.

What does it mean that ems compound?

Because each em is relative to its parent, nesting elements that are each 1.2em multiplies the effect — 1.2 × 1.2 = 1.44 of the grandparent. This compounding is the main thing to watch when using em.

When should I use em instead of rem?

Use em for sizing that should scale with its local context, such as padding inside a component that grows with that component's font size. Use rem when you want a value tied to the global root size instead.

How do I convert em back to px?

Multiply the em value by the parent font size. With a 16px parent, 1.5em × 16 = 24px.

Is anything uploaded?

No — the conversion runs entirely in your browser and nothing is sent anywhere.

What is the PX to EM Converter?

Free px to em converter. Enter a pixel value and the parent element's font size to get the equivalent em unit for relative, component-scoped CSS sizing. Runs entirely in your browser — nothing is uploaded. It runs free in your browser on Gera Tools, with nothing uploaded.

PX to EM Converter — Gera Tools

Name: PX to EM Converter
Creator: Gera Tools
License: https://creativecommons.org/licenses/by/4.0/

Get one useful tool a week

Like this tool? Enter your email and we'll send you one genuinely useful Gera tool a week — plus a link to come back to this one. No spam, one-click unsubscribe any time.

Convert px to em

The em unit is relative to the font size of the parent element, which makes it useful for component-scoped sizing that scales with its context. This converter turns a pixel value into the equivalent em for a given parent font size, so you can move a design from fixed pixels to relative CSS units.

How it works

The conversion divides the pixel value by the parent element’s font size:

em = px ÷ parent font size (px)
px = em × parent font size (px)

The parent font size — not the root — is the divisor, because ems inherit and compound through nested elements. The default parent of 16px matches the browser’s usual root size.

Example

Convert 24px with a 16px parent:

24 ÷ 16 = 1.5em

If the parent font size were 20px instead, the same 24px would be 24 ÷ 20 = 1.2em.

Pixels	Parent	Result
24px	16px	1.5em
12px	16px	0.75em
24px	20px	1.2em

em versus rem: choosing the right one

The most common source of confusion in CSS typography is when to use em versus rem. The difference is what they are relative to.

em is relative to the computed font size of the element’s parent. This makes it powerful for components that should scale proportionally: if the parent font size changes — perhaps because the user has a larger base font set, or you override it in a media query — the child’s size scales with it automatically.

rem is relative to the root element’s font size (the html element). It does not compound. This makes it predictable across nesting and is the better choice for spacing, layout, and any value that should stay consistent regardless of where in the DOM it appears.

Where em shines

Padding and margins inside a component — for example, a button whose horizontal padding is 0.75em will scale naturally if the button’s font size increases, keeping the proportions intact.
Line height on headings — line-height: 1.2em keeps the spacing proportional to the heading’s own size, not the page root.
Icon sizes next to text — an SVG icon set to 1em will always match the adjacent font size without hard-coding a pixel value.

Where rem is safer

Global spacing tokens (gutters, column widths, section padding)
Base text sizes on body copy — font-size: 1rem on p tags means a user’s browser preference is always respected without compounding.

The compounding trap

When you nest em-sized elements, the sizes multiply. For example:

.outer { font-size: 1.2em; }  /* 16 × 1.2 = 19.2px */
.inner { font-size: 1.2em; }  /* 19.2 × 1.2 = 23.04px */

This compounding is why deeply nested em sizes can produce unexpectedly large or small text. Enter the actual parent size into this converter whenever you are inside nested components — do not assume 16px.

Enter your numbers and the result updates instantly, all in your browser.