The PX to EM Converter changes pixel values into em units for CSS, based on your chosen base font size. Em units scale with the font size of their parent element, which makes layouts more flexible and responsive.
Em is the right tool when you want a size to track the text it belongs to — padding that grows with a button’s label, or a margin that stays proportional to a heading. Set the base to the element’s font size, enter a pixel value, and the converter returns the em equivalent instantly, in both directions.
How to convert px to em
- Enter the pixel value.
- Set the base font size (16px by default).
- Read the equivalent em value — it also converts em back to px.
The px to em formula
em = px ÷ base font size. With the standard 16px base, 24px equals 24 ÷ 16 = 1.5em. Change the base to match the font size of the parent element.
How em compounding works
Because em is relative to the element’s own font size, it compounds when elements are nested. If a list sets font-size: 1.2em and a nested list also uses 1.2em, the inner text is 1.2 × 1.2 = 1.44 times the base — often not what you expect. This cascading is the main gotcha with em: it is powerful for proportional, self-contained components but can surprise you in deep hierarchies, which is why many developers reach for rem when they want a fixed reference.
Good uses for em
Em shines for spacing that should scale with a component’s text — padding inside a button, the gap between an icon and its label, or a border-radius that stays proportional as the font size changes. It is also handy in media queries and for typographic rhythm within a single component. When you want a value that ignores its surroundings and stays constant page-wide, use rem instead.
Frequently Asked Questions
How do I convert px to em?
Divide the pixel value by the base font size. At a 16px base, 24px is 1.5em. The converter does this instantly and works both ways.
What base font size should I use?
Browsers default to 16px, so that’s the usual base. If the parent element uses a different font size, use that instead.
When should I use em instead of px?
Use em when you want sizes to scale relative to the surrounding text, such as padding around a label that should grow with its font size.