What is the difference between rem and em units in CSS?
In CSS, `rem` and `em` are relative length units primarily used for font sizes and other dimensions. While both offer flexibility compared to absolute units like pixels, their reference points differ significantly, impacting how they scale within a document.
em Units
The em unit is relative to the font-size of its *immediate parent element*. If an element itself has no explicit font-size set, it inherits from its parent, and then the em unit refers to that inherited size. This makes em units compound, meaning changes to a parent's font-size can cascade down and affect multiple nested elements using em.
This compounding nature can make em challenging for consistent global scaling, but it's excellent for scaling elements relative to their container or component, where you want proportional scaling within a self-contained module.
html {
font-size: 16px; /* Base font size */
}
.parent {
font-size: 20px;
}
.child {
font-size: 1.5em; /* 1.5 * 20px = 30px */
padding: 1em; /* 1 * 20px = 20px */
}rem Units
The rem unit stands for "root em" and is relative to the font-size of the *root element* of the document (i.e., the <html> element). This means that rem units are not affected by the font-size of any parent element other than the root. This provides a consistent and predictable base for all dimensions across the entire document.
Because rem units are tied to a single, global value, they are ideal for maintaining consistent spacing, typography, and element sizes throughout a website. Changing the font-size on the <html> element will uniformly scale all rem based units across the entire page, making responsive design and accessibility adjustments much simpler.
html {
font-size: 16px; /* Base font size */
}
.parent {
font-size: 20px; /* Does not affect .child's rem units */
}
.child {
font-size: 1.5rem; /* 1.5 * 16px = 24px */
padding: 1rem; /* 1 * 16px = 16px */
}Key Differences Summarized
| Feature | em Unit | rem Unit |
|---|---|---|
| Reference Point | Parent element's font-size | Root (<html>) element's font-size |
| Inheritance | Compounding; affected by ancestor font-sizes | Consistent; only affected by root font-size |
| Global Control | Difficult to scale globally due to compounding | Easy to scale globally by changing <html> font-size |
| Use Case | Component-level scaling, relative to container | Global layout, typography, consistent spacing |
| Predictability | Can be less predictable in nested structures | Highly predictable across the entire document |
When to Use Which?
Generally, rem is preferred for most layout and typography settings, including font-sizes, padding, margins, and widths, to ensure consistent scaling and easier global adjustments. This simplifies responsive design and accessibility for users who adjust their browser's default font size.
em is still valuable in specific scenarios, particularly when you want an element's dimensions to scale relative to its own font size (e.g., line-height) or when designing self-contained components where you want elements within the component to scale proportionally to the component's base font size, independent of the root.
A common modern practice is to use rem for global sizing and typography, and then use em sparingly within specific components or for properties like line-height that inherently relate to the element's own text size.