min(), max() и clamp() для отступов секций лендинга

fluid spacing без десятка media queries.

padding-block: clamp(2rem, 5vw, 6rem) даёт плавный вертикальный ритм секций от мобильного к desktop — один токен вместо sm/md/lg breakpoints.

min() и max() комбинируют фиксированный пол и потолок: width: min(100%, 40rem).

- [clamp() — MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/clamp) — Синтаксис функции.

- [min() — MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/min) — Сравнение значений.

- [Fluid spacing — web.dev](https://web.dev/articles/building-a-fluid-typography-system) — Аналогия с типографикой.

---

## Токены

Вынесите clamp в --space-section в :root — дизайнер правит три числа в одном месте.

#CSS#spacing#лендинг

Читайте также