Как работает calc() со смешанными единицами?

Question

Accepted Answer

## Зачем

`calc()` складывает величины **разных типов**, которые браузер резолвит в контексте: `%` от родителя, `vw` от вьюпорта, `rem` от root.

```css
.sidebar {
  width: calc(100% - 2rem);
  height: calc(100vh - 64px);
  padding-inline: calc(1rem + 2vw);
}
```

## Правила

Нужны пробелы вокруг `+` и `-`. `*`/`/` — с числами без единиц с одной стороны где требует спецификация. Невалидный `calc` роняет всё объявление.

Внутри можно вкладывать `calc`, использовать CSS-переменные: `calc(100% - var(--gap))`. Для clamp часто читаемее: `width: clamp(16rem, 50%, 40rem)`.

## Итог

`calc` — мост между относительными и абсолютными единицами; синтаксис строгий, зато незаменим в адаптивных отступах и «100% минус фикс».