1 em equals 16 pixels in CSS by default, which means 1 em = 16px.
The unit “em” in CSS is a scalable measurement relative to the font size of the element or its parent. When the base font size is 16 pixels, converting 1 em to pixels results in 16px. This conversion helps designers create flexible layouts that adapt to user settings or device preferences.
Conversion Tool
Result in css:
Conversion Formula
The formula to convert em to CSS pixels is:
pixels = em × base font size (in pixels)
Since the default base font size in most browsers is 16 pixels, multiplying the em value by 16 gives the equivalent pixel value. This formula works because an em unit scales relative to the font size in effect at the element.
Example calculation for 1 em:
- Base font size = 16px
- 1 em × 16px = 16px
- So, 1 em equals 16 pixels
Conversion Example
- 2 em to pixels:
- Multiply 2 × 16 = 32px
- So, 2 em equals 32 pixels
- 0.5 em to pixels:
- 0.5 × 16 = 8px
- So, 0.5 em equals 8 pixels
- 1.75 em to pixels:
- 1.75 × 16 = 28px
- Therefore, 1.75 em equals 28 pixels
- 3 em to pixels:
- 3 × 16 = 48px
- 3 em equals 48 pixels
- 0.25 em to pixels:
- 0.25 × 16 = 4px
- Hence, 0.25 em equals 4 pixels
Conversion Chart
| Em Value | Pixels (CSS) |
|---|---|
| -24.0 | -384.0 |
| -20.0 | -320.0 |
| -16.0 | -256.0 |
| -12.0 | -192.0 |
| -8.0 | -128.0 |
| -4.0 | -64.0 |
| 0.0 | 0.0 |
| 2.0 | 32.0 |
| 4.0 | 64.0 |
| 6.0 | 96.0 |
| 8.0 | 128.0 |
| 10.0 | 160.0 |
| 12.0 | 192.0 |
| 14.0 | 224.0 |
| 16.0 | 256.0 |
| 18.0 | 288.0 |
| 20.0 | 320.0 |
| 22.0 | 352.0 |
| 24.0 | 384.0 |
| 26.0 | 416.0 |
This chart let you see what pixel value matches each em value when the base font size is 16px. To find pixels for a given em, look up the em value in the left column and read the pixel equivalent on the right side.
Related Conversion Questions
- How many pixels is 1 em in CSS by default?
- What does 1 em convert to in CSS pixels when base font size changes?
- Is 1 em always equal to 16 pixels in CSS?
- How to calculate CSS pixels from 1 em unit?
- Does 1 em represent the same pixel size across all browsers?
- What affects the pixel value of 1 em in CSS?
- How to convert 1 em to rem or CSS pixels?
Conversion Definitions
em: A relative CSS unit that scales according to the font size of the parent or current element. It allows resizing text and spacing proportionally, making layouts more flexible and accessible across different devices or user preferences.
css: Cascading Style Sheets is a style sheet language used for describing the presentation of a document written in HTML or XML. It controls layout, colors, fonts, and spacing, enabling separation of content from design in web development.
Conversion FAQs
Does the 1 em value stay constant across all HTML elements?
No, 1 em depends on the font size of the element or its parent. For example, if a paragraph has a font size of 20px, then 1 em inside it equals 20 pixels, not the default 16. This means em units scale dynamically with the context.
Can I use em units for properties other than font size?
Yes, em units apply to many CSS properties like margins, paddings, and widths. They scale relative to the font size, which can be useful for maintaining proportions but might cause unexpected layout shifts if font sizes change.
Why does 1 em sometimes not equal 16 pixels?
Because 1 em is relative to the current font size, if the base font size is modified in CSS or by user settings, 1 em will reflect that new size, not always 16 pixels. Browser default is 16px, but overrides change this relationship.
Is there a difference between em and rem units in CSS?
Yes, em units are relative to the font size of the current or parent element, while rem units are relative to the root element’s font size (usually the <html> tag). This difference affects how layout scales when nested elements have their own font sizes.
How do I convert em to pixels if the base font size is not 16px?
You multiply the em value by the actual base font size in pixels. For example, if the base font size is 18px, then 1 em equals 18 pixels. Adjust the conversion formula accordingly to get an accurate pixel value.
Last Updated : 23 June, 2025
I’ve put so much effort writing this blog post to provide value to you. It’ll be very helpful for me, if you consider sharing it on social media or with your friends/family. SHARING IS ♥️
Sandeep Bhandari holds a Bachelor of Engineering in Computers from Thapar University (2006). He has 20 years of experience in the technology field. He has a keen interest in various technical fields, including database systems, computer networks, and programming. You can read more about him on his bio page.