The unit question has a clean answer once you know what each is relative to.
The decision table
- rem (root em — html font-size, default 16px): fonts, margins, paddings. Your default.
- em (parent/own font-size): padding inside buttons — scales with the button's own text. Careful: ems compound when nested
- px: things that shouldn't scale — borders (1px), shadows, tiny details
- %: widths relative to parent
- vw/vh: viewport-relative — hero sections (
min-height: 100vh), fluid type via clamp - ch: character width —
max-width: 65ch= perfect reading line length
The accessibility reason rem wins
Users with weak eyesight raise their browser's default font size. rem-sized text scales with their setting; px-sized text ignores it. Same for spacing — a rem-based layout scales gracefully. This answer in an interview signals you build for humans.
The mental math trick
html { font-size: 62.5%; } /* 1rem = 10px — easy math */
/* OR just remember: 1rem=16, 1.5rem=24, 2rem=32 */Full lesson: Complete CSS Guide §04.