Widely availableVery useful for spacing and sizing that should grow with text, especially inside reusable components.
Units and functions Widely available

em unit

The em unit scales relative to the element's font size. It is a core CSS building block for type-driven spacing and proportionate component sizing.

UnitsTypographyRelative sizing

Overview

The em unit scales relative to the element's font size. It is a core CSS building block for type-driven spacing and proportionate component sizing.

Browser support

Feature Desktop Mobile
Chrome
Edge
Firefox
Safari
Chrome Android
Safari iOS
css.types.length.em
1
12
1
1
18
1
1+Supported (version) Not supported ※Has note Sub-feature descriptions sourced from MDN Web Docs (CC BY-SA 2.5)

Syntax

CSS 
.text {
  font-size: 1.2em;
  padding: 0.5em 1em;
  margin-bottom: 1.5em;
  border-radius: 0.25em;
}

Live demo

conpo-nentratio

CSS conpo-nentratio demo.

PreviewFullscreen

putchild in inheritance

CSS putchild in inheritance demo.

PreviewFullscreen

button. ske-l

CSS button. ske-l demo.

PreviewFullscreen

Use cases

  • Type-relative spacing

    Let padding, margins, or icon sizing follow the text scale of the component naturally.

  • Reusable component proportions

    Keep components balanced when their local font size changes across contexts.

Cautions

  • Nested em-based rules can compound in ways that surprise you if inheritance is not planned carefully.
  • Use em intentionally so scaling relationships remain predictable rather than accidental.

Accessibility

  • Relative units support zoom-friendly design and user font resizing.
  • Components that scale with text are often more robust for low-vision users.

Related links

Powered by web-features