PX to EM Converter
Convert pixel values to element-relative EM units for CSS
PX to EM Calculator
EM units are relative to the font size of the parent element. The default browser font size is 16px, but your parent element may have a different font size. Enter the parent element's computed font size below.
Conversion Result
Batch Converter
Convert multiple pixel values at once. Enter values separated by spaces, commas, or new lines.
Batch Results
| Pixels | EM | CSS Code |
|---|
Common PX to EM Values
Based on the standard 16px parent font size, here are commonly used values:
| Pixels | EM | Common Use Case |
|---|---|---|
| 8px | 0.5em | Small spacing, borders |
| 12px | 0.75em | Small text, minor spacing |
| 16px | 1em | Base font size, standard spacing |
| 20px | 1.25em | Subheadings, increased spacing |
| 24px | 1.5em | H3 headings, section spacing |
| 32px | 2em | H2 headings, large spacing |
| 48px | 3em | H1 headings, major spacing |
Frequently Asked Questions
EM units are relative to the font size of their parent element, while REM (Root EM) units are relative to the font size of the root element (html).
The key difference is what they're relative to:
- 1em equals the font size of the parent element
- 1rem always equals the font size defined in the root element (typically 16px)
EM units can create a compounding effect when nested elements inherit font sizes, while REM units always reference the same base value for more predictable sizing.
/* With a parent font-size of 20px */
.element {
font-size: 0.8em; /* = 16px (0.8 x parent's 20px) */
}
/* With nested elements */
.parent {
font-size: 20px;
}
.parent .child {
font-size: 0.8em; /* = 16px (0.8 x 20px) */
}
.parent .child .grandchild {
font-size: 0.8em; /* = 12.8px (0.8 x 16px) */
}
EM units are particularly useful in specific situations:
- Component-Based Design - When you want an element's measurements to scale relative to its parent container rather than the root element.
- Media Object Patterns - For components that need to maintain internal proportions regardless of their context.
- Compound Components - When creating reusable UI components that should scale based on their container's font size.
- Typography Scaling - For creating typographic hierarchies within components.
- Padding and Margins - When you want these values to scale relative to the element's own font size.
A good approach is to use REM for font sizes and global spacing, and EM for component-internal spacing that should scale with its parent.
EM units create a compounding effect with nested elements because each element's EM value is calculated based on its parent's computed font size:
/* Base font size of 16px */
body {
font-size: 16px;
}
.parent {
font-size: 1.5em; /* = 24px (1.5 x 16px) */
}
.parent .child {
font-size: 1.5em; /* = 36px (1.5 x 24px) */
}
This compounding behavior can be useful in specific design scenarios but can also lead to unexpected results if not managed carefully. To avoid compounding for specific properties, you can:
- Use REM units instead when you don't want compounding
- Reset to a specific EM value calculated from the root (e.g., 0.75em for the child if you want 12px based on 16px root)
- Use a CSS preprocessor to calculate exact values
Here are some best practices for effectively using EM units in your CSS:
- Be aware of inheritance - Always keep in mind that EM units are affected by the parent element's font size.
- Use EMs for component-internal spacing - Margins, padding, and other spacing inside components work well with EM units to maintain proportions.
- Consider the "EM Bubble" - Be careful with deeply nested elements using EM units as they can create a compounding effect (sometimes called the "EM bubble").
- Combine with REM - Use REM for global sizing and EM for component-specific sizing for the best of both worlds.
- Document your approach - If using a mix of units, document your strategy so other developers understand when to use each unit.
A common pattern in modern CSS frameworks:
/* Global typography uses rem */
html {
font-size: 16px;
}
h1 { font-size: 2.5rem; }
h2 { font-size: 2rem; }
p { font-size: 1rem; }
/* Components use em for internal spacing */
.card {
font-size: 1rem; /* Reset font size */
padding: 1.25em; /* Relative to card's font size */
}
.card-title {
font-size: 1.5em; /* Relative to card's font size */
margin-bottom: 0.5em; /* Relative to card-title's font size */
}
About EM Units
EM units are relative to the font size of their parent element. If a parent element has a font size of 20px, then 1em equals 20px for all its child elements.
Benefits of EM Units
-
Component Scaling: Elements scale with their containers
-
Proportional Design: Maintains internal proportions of components
-
Adaptability: Adjusts automatically to parent element changes
-
Context-Aware: Sizes based on the context they appear in
The name "em" comes from typography, where it was traditionally the width of the capital letter "M".
CSS Usage Examples
Common ways to use EM units in your CSS:
/* Base styles */
body {
font-size: 16px;
}
/* Typography with EM */
.article {
font-size: 18px; /* New parent font size */
}
.article h2 {
font-size: 1.5em; /* 27px (1.5 × 18px) */
margin-bottom: 0.5em; /* 13.5px (0.5 × 27px) */
}
.article p {
font-size: 1em; /* 18px (1 × 18px) */
line-height: 1.5em; /* 27px (1.5 × 18px) */
margin-bottom: 1em; /* 18px (1 × 18px) */
}
/* Component sizing */
.card {
font-size: 14px; /* Base for card */
padding: 1.5em; /* 21px (1.5 × 14px) */
}
.card-title {
font-size: 1.2em; /* 16.8px (1.2 × 14px) */
}
.card-meta {
font-size: 0.85em; /* 11.9px (0.85 × 14px) */
}
EM units are especially useful for creating reusable components that scale proportionally regardless of where they're used.