Em vs Rem in CSS: Key Differences and When to Use Each

In CSS, em is a relative unit based on the font size of the parent element, while rem is relative to the root element's font size. Use em for scalable components that depend on their container, and rem for consistent sizing across the whole page.

Quick Comparison

Here is a quick side-by-side comparison of em and rem units in CSS.

Factor	em	rem
Reference point	Font size of the parent element	Font size of the root (html) element
Inheritance	Depends on the element's parent size	Always based on root size, independent of parents
Use case	Scaling relative to container or component	Consistent sizing across the entire page
Effect of nesting	Sizes compound with nested elements	Sizes remain consistent regardless of nesting
Common usage	Padding, margin, font-size inside components	Global font sizes, layout dimensions
Responsiveness	Can be tricky due to compounding	Easier to manage with media queries

Key Differences

The main difference between em and rem is their reference point. em units are relative to the font size of the parent element. This means if a parent has a font size of 20px, then 1em inside it equals 20px. If you nest elements with em sizes, the sizes multiply, which can cause unexpected results if not managed carefully.

On the other hand, rem units always refer to the root element's font size, usually the html tag. This makes rem values consistent throughout the page, no matter how deeply nested the element is. This consistency makes rem easier to use for global sizing and layout.

Because em depends on the parent, it is great for components that need to scale relative to their container. rem is better for setting base font sizes and spacing that should stay uniform across the site.

Code Comparison

Here is an example showing how em units scale based on the parent font size.

css

html {
  font-size: 16px;
}

.container {
  font-size: 20px; /* Parent font size */
  border: 1px solid black;
  padding: 1em; /* 1em = 20px padding */
}

.container p {
  font-size: 1.5em; /* 1.5 * 20px = 30px */
  margin: 0.5em; /* 0.5 * 20px = 10px */
}

Output

A container box with 20px font size, 20px padding, and inside paragraph text sized 30px with 10px margin.

Rem Equivalent

The same layout using rem units keeps sizes consistent regardless of the container's font size.

css

html {
  font-size: 16px;
}

.container {
  font-size: 20px; /* This does not affect rem */
  border: 1px solid black;
  padding: 1.25rem; /* 1.25 * 16px = 20px padding */
}

.container p {
  font-size: 1.875rem; /* 1.875 * 16px = 30px */
  margin: 0.625rem; /* 0.625 * 16px = 10px */
}

Output

A container box with 20px font size (visual only), 20px padding, and inside paragraph text sized 30px with 10px margin, all consistent from root font size.

When to Use Which

Choose em when you want elements to scale relative to their container, such as buttons or cards that adjust size based on their parent. This helps keep components flexible and self-contained.

Choose rem when you want consistent sizing across the whole page, like base font sizes, margins, and paddings that should not change with nesting. This makes your layout predictable and easier to maintain.

In practice, many developers use rem for global layout and typography, and em inside components for local scaling.

Key Takeaways

em is relative to the parent element's font size and can compound with nesting.

rem is relative to the root element's font size and stays consistent across the page.

Use em for component-level scaling and rem for global, consistent sizing.

Nesting em units can cause unexpected size changes, so use carefully.

rem simplifies responsive design by keeping sizes predictable.