What CSS units should you use and when?

Question

Accepted Answer

CSS units split into **absolute** (fixed) and **relative** (scale with something). Choosing well is key to responsive, accessible layouts.

## Absolute

```css
.x { width: 100px; }  /* px — fixed pixels; predictable, doesn't scale */
```

Use `px` for things that shouldn't scale (borders, small fixed details).

## Relative — the important ones

```css
font-size: 1.5rem;  /* rem — relative to the ROOT font-size (html). Consistent. */
font-size: 1.2em;   /* em — relative to the PARENT's font-size. Compounds! */
width: 50%;         /* % — relative to the parent's size */
width: 50vw;        /* vw — 50% of viewport WIDTH */
height: 100vh;      /* vh — 100% of viewport HEIGHT */
```

## rem vs em — the crucial distinction

```css
html { font-size: 16px; }
.parent { font-size: 20px; }
.parent .child { font-size: 2em;  } /* 2 × 20 = 40px (relative to parent) */
.parent .other { font-size: 2rem; } /* 2 × 16 = 32px (relative to root) */
```

`em` **compounds** through nesting (a child of a child multiplies), which can spiral unexpectedly. `rem` always references the root, so it's predictable — the go-to for font sizes and spacing. Use `em` when you *want* sizing relative to the local font (e.g. padding on a button that scales with its text).

## Why relative units matter for accessibility

```css
font-size: 16px;   /* ❌ ignores the user's browser font-size preference */
font-size: 1rem;   /* ✅ scales when the user increases their default size */
```

Using `rem` for type respects users who set a larger default font — a real accessibility win that `px` breaks.

## Why it matters

The right unit makes layouts responsive and accessible: `rem` for type/spacing (predictable + respects user settings), `%`/`vw`/`vh` for fluid layout, `px` for fixed details, and `em` for locally-relative sizing.

Newer viewport units (`dvh`, `svh`) also fix mobile address-bar height issues.