Reference
CSS units, explained
A CSS length is only meaningful relative to something. The unit decides what that something is: the root font size, the parent element, the viewport or the grid container. These entries state the reference and the failure modes.
Relative to what
Absolute units such as px resolve to a fixed CSS length. Relative units resolve against a context that changes with the element, the font or the viewport. The same 2em can be 32 pixels in one place and 20 in another, which is the source of both flexibility and confusion.
Design systems usually combine a small set: rem for spacing and typography, px for borders, % for fluid widths and viewport units for full-screen sections. Mixing too many relative units makes the cascade hard to predict.
Accessibility is a unit choice
Users can change the browser's default font size. Sizes expressed in rem follow that preference; sizes in px do not. That is why typography and spacing are often defined in rem even when the design is specified in pixels.
Relative units also inherit: em compounds through nested elements, and percentages resolve against the parent's computed value. If a layout grows twice as fast as expected, a nested relative unit is the usual cause.