Чем отличаются единицы `px`, `em` и `rem` для `font-size`?

Question

Accepted Answer

## px, em и rem

- **`px`** — абсолютные CSS-пиксели; предсказуемо, но хуже для масштабирования от корня типографики.
- **`em`** — относительно **font-size родителя** (для `font-size` — родителя). Вложенность `em` накапливается — легко получить сюрприз.
- **`rem`** — относительно **font-size корневого элемента** (`html`). Масштабирование от одного рычага.

```css
html { font-size: 16px; }
.card { font-size: 1.25rem; } /* 20px */
.card small { font-size: 0.875em; } /* 87.5% от .card */
```

## Итог

Для модульной типографики чаще `rem`; `em` — для локальных пропорций внутри компонента; `px` — точечно (бордеры, тени).