1 em equals 16 pixels in CSS when the base font size is the default 16px.
The unit “em” is relative to the font size of the parent element, so converting 1 em to pixels or CSS units depends on the base font size. By default, browsers set 1 em to 16 pixels, but this value can change if the font size changes.
Conversion Tool
Result in css:
Conversion Formula
The formula to convert em to CSS pixels is based on multiplying the em value by the base font size in pixels. Because 1 em equals the font size of the parent element, when the base font size is 16px (default), the formula is:
CSS pixels = em value × base font size (in pixels)
For example, if you have 1 em:
- Start with em value: 1
- Multiply by base font size: 1 × 16 = 16
- So, 1 em equals 16 pixels in CSS
If the base font size changes, the result changes proportionally. For 1.5 em at 20px base font size:
- 1.5 × 20 = 30 pixels
Conversion Example
- Converting 0.75 em to CSS pixels:
- Take 0.75 em
- Multiply by 16 (base font size): 0.75 × 16 = 12 pixels
- Result: 12 pixels in CSS
- Converting 2 em:
- 2 × 16 = 32 pixels
- Result is 32 pixels
- Converting 3.25 em:
- 3.25 × 16 = 52 pixels
- Result: 52 pixels
- Converting 0 em:
- 0 × 16 = 0 pixels
- Result is 0 pixels
Conversion Chart
| em | CSS Pixels |
|---|---|
| -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 |
| 4.0 | 64.0 |
| 8.0 | 128.0 |
| 12.0 | 192.0 |
| 16.0 | 256.0 |
| 20.0 | 320.0 |
| 24.0 | 384.0 |
| 26.0 | 416.0 |
This chart shows em values on left and their corresponding CSS pixel values on right. To use it, find the em value you want, then see its pixel equivalent by multiply by 16 base font size.
Related Conversion Questions
- How many pixels equal 1 em in CSS at default settings?
- What is the difference between 1 em and 1 rem in CSS?
- Why does 1 em sometimes not equal 16 pixels in CSS?
- How to convert 1 em to pixels when the base font size is changed?
- Does 1 em in CSS always represent the same pixel value?
- Can 1 em be negative in CSS, and what does it represent?
- How does browser default font size affect 1 em conversion in CSS?
Conversion Definitions
em: Em is a relative CSS unit that is based on the computed font size of the parent element. It scales dynamically, allowing responsive typography and spacing. One em equals the current font size, so changing parent font size affects em-based measurements.
css: CSS (Cascading Style Sheets) is a stylesheet language used to describe the presentation of a HTML document. CSS controls layout, colors, fonts, and spacing, allowing developers to separate content from design, creating flexible and maintainable web pages.
Conversion FAQs
Why does 1 em not always equal 16 pixels?
1 em equals 16 pixels only when the base font size is 16px, which is browser’s default. If the font size is changed on the parent element or body, 1 em scales accordingly. So, if base font size is 20px, 1 em equals 20 pixels, not 16.
How does the parent element affect em conversions?
Em units are relative to the font size of the parent element. If the parent font size is modified, all child elements using em units will scale based on that. This can create compounding effects when nested elements use em sizes.
Can I use em units for properties other than font size?
Yes, em units can be applied to other CSS properties like margin, padding, width, and height. Because em is relative to font size, these properties will scale with text size, helping keep layout proportional.
Is it better to use em or pixels in CSS?
Using em units is better for responsive design, because they scale with font size and user settings. Pixels offer fixed sizes that do not adapt well to accessibility needs. Em units provide flexibility but require careful management of font sizes.
What happens if I set a negative em value?
Negative em values are valid in CSS and can be used for properties like margin or positioning to move elements in opposite directions. However, negative font sizes are invalid and will be ignored or cause errors in browsers.
