Справочник HTML & CSS

calc()

Вычисляет значение из выражения — даже в разных единицах.

Синтаксис

calc(expression)

Параметры

Параметр	Тип	Описание
expression	math	`+`, `-`, `*`, `/` с числами, длинами, процентами и переменными.

Примеры

Проценты минус пиксели:

<style>
  .side { float: left; width: 100px; background: gold; height: 60px; }
  .main { margin-left: 110px; width: calc(100% - 110px); background: lightskyblue; height: 60px; }
</style>
 
<div class="side">100px</div>
<div class="main">calc(100% - 110px)</div>

Арифметика с пользовательскими свойствами:

<style>
  :root { --space: 8px; }
  .box { padding: calc(var(--space) * 2); background: lavender; }
</style>
 
<div class="box">Padding is twice the base space</div>

Примечания

Пробелы вокруг + и - обязательны: calc(100% -10px) не сработает. Внутри calc() можно использовать другие функции: var(), min(), clamp().

См. также

clamp() — Держит значение в пределах: желаемое, но не меньше минимума и не больше максимума.
min() — Берёт наименьшее из значений — способ задать верхний предел.
var() — Подставляет значение пользовательского свойства (переменной CSS).
px, em, rem, %, vw, vh — Единицы длины в CSS: абсолютные пиксели и относительные единицы.

В учебнике

Функции CSS — Вычисления прямо в CSS — calc(), min(), max() и clamp(), смешивание единиц, плавные размеры и функции вместе с переменными.

Спасибо, что читаете!