Relative Units Explained: em, rem, and %
The em box grows or shrinks with the slider above. rem and % stay put because they measure from the document root and from their own container, not from the nearby parent.
CSS gives you several ways to size text and elements relative to something else, and picking the right one keeps a design flexible. Here is a quick reference for the units used across Niagara UI templates.
em is relative to the font size of the current element's parent, which makes it useful for spacing that should scale alongside nearby text, but it can compound unexpectedly when nested.
rem is relative to the root html element's font size, so it stays predictable no matter how deeply an element is nested. Most of our components default to rem for font sizes and spacing.
Percent (%) is relative to the parent container's corresponding dimension, commonly used for widths and heights in fluid layouts.
Viewport units like vw and vh are relative to the browser viewport size, useful for full-bleed sections or hero banners.
As a rule of thumb: use rem for typography and consistent spacing, % for fluid container widths, and reserve em for small tweaks relative to a nearby element.