The em unit: local font-relative sizing and compounding

An em is a font-relative length. For most properties, 1em uses the element’s computed font size. In font-size itself, it uses the inherited font size instead, which is why nested em font sizes can compound.

Compare font size and padding

The parent starts at 20px for this measurement exercise. Its child uses 1.25em font-size, becoming 25px; the child’s 1em padding then uses that child’s 25px font size.

<div class="parent"><p class="child">25px text and 25px padding.</p></div>

.parent {
  font-size: 20px;
}
.child {
  font-size: 1.25em;
  padding: 1em;
  border: 1px solid #2563eb;
}

Watch nested font sizes

A second descendant with font-size:1.25em grows again from its inherited 25px to 31.25px. That may be intended for a local type hierarchy, but it can surprise you in repeated nested components. Use rem when a size should follow the root rather than each nesting level.

Em is useful for component padding that should grow with that component’s text. It is not automatically accessible or responsive: the chosen font rule, available space, wrapping, zoom, and user settings still matter. Avoid overriding the root with a fixed pixel value merely to make calculations easy in production.

Other relative values differ

Percentages have property-specific reference values; they are not always the parent box’s width. A percentage font-size uses the inherited font size. Px values do not follow an element’s font size but do participate in browser zoom. Using mixed units intentionally is normal.

In media queries, em is based on the initial font size, not on a body/html font-size declaration. A query does not move when you change one component’s font. Test zoom and user font settings separately.

Learn rem, font-size, and padding.

Sources

Reference 1 Reference 2 Reference 3 provide the technical details and current compatibility information.