1 em is equal to 16 pixels in CSS by default.
In CSS, the unit “em” represents a scalable unit relative to the font size of the element. When you convert 1 em to CSS pixels, it typically equals 16 pixels because browsers set 16px as the default font size. This value can change based on the parent element’s font size, but 16px is the baseline.
Conversion Tool
Result in css:
Conversion Formula
The formula to convert em to CSS pixels is: pixels = em × base font size. Because the base font size in browsers is usually 16 pixels, we multiply the em value by 16. This means 1 em equals 16 pixels, 2 em equals 32 pixels, and so on.
This works because em units are relative to the current font size. If the font size changes, the pixel value changes, but when no overrides exist, the base font size of 16px is used as reference.
Example calculation for 1.5 em:
- 1.5 em × 16 px = 24 pixels
- So, 1.5 em means 24 pixels in CSS pixels.
Conversion Example
- 2 em to pixels: Multiply 2 by 16 = 32 pixels. So 2 em equals 32 pixels.
- 0.75 em to pixels: 0.75 × 16 = 12 pixels. Result is 12 pixels.
- 3.25 em to pixels: 3.25 × 16 = 52 pixels. That means 52 pixels.
- 0.5 em to pixels: 0.5 times 16 equals 8 pixels.
- 4 em to pixels: 4 × 16 = 64 pixels.
Conversion Chart
| Em | CSS Pixels |
|---|---|
| -24.0 | -384 |
| -20.0 | -320 |
| -16.0 | -256 |
| -12.0 | -192 |
| -8.0 | -128 |
| -4.0 | -64 |
| -0.5 | -8 |
| 0.0 | 0 |
| 0.5 | 8 |
| 1.0 | 16 |
| 2.0 | 32 |
| 4.0 | 64 |
| 8.0 | 128 |
| 12.0 | 192 |
| 16.0 | 256 |
| 20.0 | 320 |
| 26.0 | 416 |
This chart shows em values in one column and their equivalent CSS pixel values in the next. You can look up any em value here and find the corresponding pixel measurement for use in styling.
Related Conversion Questions
- What does 1 em convert to in pixels for CSS?
- How many pixels equal 1 em in a CSS stylesheet?
- Is 1 em always equal to 16px in CSS?
- Can 1 em be different than 16 pixels in CSS and why?
- How to calculate 1 em to CSS pixels manually?
- Why does 1 em sometimes not match 16px in CSS?
- What CSS property affects the conversion of 1 em to pixels?
Conversion Definitions
em: An em is a relative unit in CSS representing the computed font size of the current element. If the font size is 16 pixels, then 1 em equals 16 pixels. Em units allow scalable design, adjusting elements relative to text size or parent containers.
css: CSS stands for Cascading Style Sheets, a stylesheet language used to describe the presentation of HTML documents. It controls layout, colors, fonts, and spacing, allowing web pages to be styled consistently across different devices and screen sizes.
Conversion FAQs
Why might 1 em not equal 16 pixels on some websites?
Because em units are relative to the font size of the current element or its parent, the base font size may be changed by the CSS rules. If a parent element has a font size other than 16px, 1 em will correspond to that altered size instead of 16 pixels.
Can I use em units for properties other than font size?
Yes, em units are commonly used for margins, padding, width, and height. Using ems keeps element sizes proportional to text size, which helps with responsive design and accessibility, as the layout adapts when font size changes.
What happens if the base font size in the browser is changed by the user?
If a user changes the browser’s default font size, the pixel value of 1 em will change accordingly. For example, if the base size is set to 20px in the browser, 1 em in CSS will equal 20 pixels instead of the default 16.
Is there any difference between em and rem units for conversion?
Yes, em is relative to the font size of the current element, while rem is relative to the root element’s font size. This means rem values are consistent throughout the document regardless of nesting, but em values can compound if nested inside elements with different font sizes.
How do I convert em to pixels if the font size is not 16px?
You multiply the em value by the actual font size in pixels of the element you’re working with. For example, if the font size is 18px and you want to convert 1.5 em, then 1.5 × 18 = 27 pixels.