The rem unit: root-relative size without nested compounding

A rem is a length relative to the root element’s font size, normally html. It is not a mechanism that makes a value inherited. Each property still follows its own inheritance rules.

Keep a size stable across nested text contexts

The root is 16px only to make this measurement explicit. The surrounding group uses 24px text, but its paragraph’s 1rem font-size and padding each resolve to 16px.

<div class="group"><p class="sample">16px text and 16px padding.</p></div>

html {
  font-size: 16px;
}
.group {
  font-size: 24px;
}
.sample {
  font-size: 1rem;
  padding: 1rem;
  border: 1px solid #2563eb;
}

Let the root follow user defaults

For a real interface, html{font-size:100%} can retain the user’s default base size. A 1rem size then follows that root choice. Do not assume every browser/user has a 16px default or set a tiny root just to simplify conversion arithmetic.

Rem avoids the repeated font-size multiplication that can occur with nested em rules. Em remains useful for spacing relative to a component’s own text. Px can be useful for a crisp border. Choose the reference relationship you need instead of requiring one unit everywhere.

Limits and special contexts

Changing a parent’s font size does not change a descendant’s explicitly authored rem length unless it changes the root itself. When rem is used in the root’s own font-size, it refers to the initial font size to avoid a circular definition. Media-query font-relative units use initial font metrics rather than the authored root size.

Root-relative lengths can support scalable design, but do not guarantee fit or accessibility. Test increased text, zoom, narrow widths, and wrapping. A percentage’s basis depends on the property; it is not universally the parent’s size.

Learn em, font-size, margin, and responsive design.

Sources

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