PX to EM Converter

Convert using the relevant font-size base

An em value is relative, so there is no single fixed number of pixels in one em for every element. This converter uses a base font size in pixels: it starts at 16px, and you can change it to match the CSS context you are converting. The same px value can therefore produce different em results under different bases.

With a 16px base, 24px is 24 ÷ 16 = 1.5em. With a 20px base, 24px is 1.2em. The fields convert in either direction, and the result is shown to at most four decimal places.

Match the base to the property

For font-size, em is resolved against the parent’s computed font size. For many other properties, such as padding, it is based on the element’s own computed font size. Nested em font sizes can compound as each child inherits a computed size from its parent. MDN explains these rules in its CSS font-size reference; the W3C CSS Values and Units specification defines the relative length context.

This calculator performs the arithmetic you request; it does not inspect a stylesheet or determine which element is the correct reference. Use the computed size for the specific element and property when accuracy matters.

Convert a value with the right context

1. Decide what CSS property you are sizing

   Identify whether the value will set font-size or another property such as padding or margin. That affects which computed font size should be the base.

2. Find the computed base size

   Use the final computed font size for the relevant parent or element after inheritance and cascading have been applied. The initial 16px is only a convenient starting assumption.

3. Enter either side

   Enter pixels to obtain em, or enter em to obtain pixels. Change the base-size field if the target context differs from 16px; the opposite value updates automatically.

4. Copy and verify in context

   Copy the displayed value, apply it to the intended CSS rule, and check the resulting computed style. The converter rounds its displayed result, so small precision differences can occur.

Three quick checks

These values follow the two formulas above. If the computed font size in the actual layout differs from the chosen base, the rendered result will differ too.

PX and EM questions

Rounding and CSS boundaries

• The converter shows up to four decimal places. Copying the displayed result may lose additional precision from the underlying division or multiplication.
• A blank or zero base falls back to 16px in the calculation. Choose a positive base that reflects the target context rather than relying on that fallback.
• The output is only a numeric conversion. It does not read styles, resolve inheritance, or decide whether a particular CSS property accepts a negative or otherwise unusual value.
• CSS px is a reference length unit, not necessarily one physical display pixel. This conversion does not measure screen density or alter the CSS reference size.