PX to EM Calculator

An em is relative to the font-size of the parent or current element, while a rem is relative to the root font-size on the html element. Because em depends on the parent, the same em value can resolve to different pixel sizes in different parts of a page.

Divide the pixel value by the parent font-size. With a 16px parent, 24px is 24 divided by 16, which is 1.5em. To go the other way, multiply the em value by the parent font-size.

Each em resolves against its own parent. If a parent is set to 1.2em it grows, and a child set to 1.2em multiplies on top of that, so sizes can snowball through nested elements. Rem avoids this by always using the root.

Use the computed font-size of the element that the em value applies to, which is usually inherited from its parent. If you are unsure, 16px is the common browser default and a safe starting point.

Em is handy for spacing that should scale with a component's own font-size, such as padding inside a button that grows with its label. Rem is better when you want sizing to stay consistent across the whole page.