1 em equals 16 pixels (px) in CSS by default.
In CSS, 1 em is a relative unit that depends on the font size of the parent element. When no font size is set by the user or parent elements, browsers use a default of 16px, so 1 em converts to 16px in that context.
Conversion Tool
Result in css:
Conversion Formula
The formula to convert em to CSS pixels is:
pixels = em_value × base_font_size
This is because an “em” unit is relative to the font size of the element’s parent. In most browsers, the default base font size is 16px, so multiplying by 16 converts em to pixels.
Example:
- Given 1 em, and base font size 16px
- pixels = 1 × 16 = 16px
- If em was 1.5, pixels = 1.5 × 16 = 24px
Conversion Example
- Convert 2 em to pixels:
- 2 × 16 = 32px
- This means 2 em equals 32 pixels based on the base font size.
- Convert 0.75 em to pixels:
- 0.75 × 16 = 12px
- So, 0.75 em equals 12 pixels.
- Convert 3.5 em to pixels:
- 3.5 × 16 = 56px
- Therefore, 3.5 em corresponds to 56 pixels.
- Convert 0.1 em to pixels:
- 0.1 × 16 = 1.6px
- Small values like 0.1 em translate to 1.6 pixels.
- Convert -1 em to pixels:
- -1 × 16 = -16px
- Negative values represent size reduction or offsets.
Conversion Chart
| Em Value | Pixels (px) |
|---|---|
| -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 shows em values on the left and their equivalent pixel values on the right. You can use the chart to quickly find pixel sizes based on em units assuming a 16px base font size, which helps in designing consistent layouts.
Related Conversion Questions
- How many pixels is 1 em in CSS by default?
- What is the pixel value of 1 em if base font size changes?
- Does 1 em always equal 16 pixels in CSS?
- How can I convert 1 em to pixels in responsive design?
- Why does 1 em sometimes differ from 16px in CSS?
- How to calculate CSS pixels from 1 em with different parent font sizes?
- What is the difference between 1 em and 1 rem in CSS pixel conversion?
Conversion Definitions
em: Em is a relative unit in CSS used for sizing elements such as fonts, margins, and paddings. Its value depends on the font size of the parent element, making it flexible for responsive designs. 1 em equals the current font size of the element’s container.
css: CSS, Cascading Style Sheets, is a stylesheet language for describing the presentation of HTML documents. It controls layout, colors, fonts, and spacing of web pages. CSS makes content visually appealing and adaptable across different devices and screen sizes.
Conversion FAQs
Why does 1 em not always equal 16 pixels in CSS?
1 em equals 16 pixels only when the base font size is 16px, which is common in browsers by default. If the parent element changes font size, 1 em becomes relative to that size, causing it to be smaller or larger than 16px. So, em is always relative, not fixed.
Can I use 1 em to set widths or heights in CSS?
Yes, em units can be used to set widths, heights, margins, paddings, and more. However, since em is relative to font size, if font size changes, the element’s size will change too. This can be useful for scalable layouts but may cause unexpected results if font sizes vary widely.
How does 1 em compare with 1 rem in CSS conversions?
1 em is relative to the font size of the current element’s parent, whereas 1 rem always refers to the root element’s font size. That means rem units provide more consistent sizing across a page, while em units can compound if nested inside elements with different font sizes.
Is it possible to convert em to pixels without knowing the parent font size?
No, since em units depend on the parent element’s font size, you must know that value to convert em to pixels accurately. Without it, conversion is uncertain, and 16px is just a common assumption for the default font size.
What happens if I set the base font size to a value other than 16px?
If base font size changes, the pixel value of 1 em changes accordingly. For example, if base font size is set to 20px, then 1 em equals 20 pixels. This changes how all em-based sizes calculate, affecting layouts and text sizes across the webpage.