Home / CSS tools / EM, REM and PX converter

EM, REM and PX Converter

Edit any of the three fields and the other two update. Set the parent and root font sizes, then test how nested em values compound.

Nested em calculator

Three units, two reference sizes

The units use different references. Pixels are fixed. Rem is relative to the root font size, which is the font size of the html element. Em is relative to a parent font size, or to the element own font size for properties other than font-size. That is why this converter has separate boxes for the parent size and the root size.

px = em x parent size
px = rem x root size

Example

With a root of 16px and a parent of 20px, a value of 1.5em is 30px, while 1.5rem is 24px. Same number, different result, because the references differ.

The nesting calculator

Em values multiply down the page. Enter one em value for each nested level, such as 1.2, 1.2, 1.2, and the table shows each level size starting from the root size. With a 16px root, three levels of 1.2em give 19.2px, 23.04px and 27.648px. Rem would stay the same at every level, which is why it is easier to predict.

Related

For a single direction use the em to px or px to em converter. The em vs rem guide explains when to choose each, and the CSS units guide covers units such as vw, vh and ch.

Frequently asked questions

What is the difference between em and rem?

Rem is relative to the root font size, so it is the same everywhere. Em is relative to a parent or element font size, so it can change with context.

What is the root font size?

The font size of the html element. It is 16px by default in browsers.

Why do nested em values grow so quickly?

Each level multiplies the one above. Three levels of 1.2em give about 1.73 times the starting size.

Can I use this for padding and margin?

Yes. For those properties, em is measured against the element own font size, so put that size in the parent font size box.