Исполняемые доки CSS: Функция calc()

Q: Что делает calc() в CSS?

Вычисляет значение из выражения с +, -, * и / и может смешивать единицы, которые браузер узнает только при раскладке. width: calc(100% - 200px) это полная ширина родителя минус 200px, какой бы ни была ширина родителя.

Q: Почему не работает calc()?

Самая частая причина: нет пробелов. Вокруг + и - должны быть пробелы с обеих сторон, поэтому calc(100%-20px) невалидно. Другие причины: умножение двух длин (10px * 2px) или деление на длину, что не дает длины. Невалидный calc() делает невалидным все объявление, и браузер его игнорирует.

Q: Можно ли использовать CSS-переменные в calc()?

Да. calc(var(--gap) 2) удваивает переменную, а calc(var(--columns) 1px) превращает число без единиц в пиксели. Сначала подставляется значение переменной, а затем выполняется вычисление.

Q: Нужны ли пробелы вокруг * и / в calc()?

Нет. Пробелы обязательны только вокруг + и -, потому что без них -20px читалось бы как отрицательное число. Пробелы вокруг * и / необязательны, но писать их везде проще всего запомнить.

Q: Чем calc() отличается от clamp()?

calc() вычисляет одно значение из выражения. clamp(MIN, VAL, MAX) удерживает значение между двумя пределами. Они сочетаются: каждый аргумент clamp() уже может содержать вычисления в стиле calc, например clamp(1rem, 1rem + 2vw, 3rem).

Что делает calc()

calc() выполняет арифметику внутри значения CSS и может смешивать единицы, размер которых известен только при раскладке. Классический случай: «вся ширина минус боковая панель фиксированной ширины»:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>calc</title>
  <style>
    body { font-family: system-ui, sans-serif; }
    .layout { background: #e5e7eb; height: 110px; }
    .side { float: left; width: 180px; height: 100%; background: #111827; color: white; }
    .main {
      float: left;
      width: calc(100% - 180px); /* whatever is left next to the sidebar */
      height: 100%;
      background: #2563eb;
      color: white;
    }
  </style>
</head>
<body>
  <div class="layout"><div class="side">180px</div><div class="main" id="m">calc(100% - 180px)</div></div>
  <p id="out"></p>
  <script>
    const m = document.getElementById('m');
    document.getElementById('out').textContent = 'main is ' + m.offsetWidth + 'px of a ' + m.parentElement.offsetWidth + 'px row';
  </script>
</body>
</html>

100% известен только после раскладки страницы, а 180px фиксирован, поэтому ни одна единица не выразила бы это сама. calc() вычисляет: в превью шириной 800px строка шириной 784px, и основной колонке достается 604px, а строка под раскладкой выводит настоящие числа. Сегодня эту раскладку без вычислений сделали бы flexbox или grid, но такое же вычитание встречается повсюду: высота минус шапка, ширина минус промежуток.

Правила синтаксиса

width: calc(100% - 2rem);          /* + and - need spaces on both sides */
width: calc(100% / 3);             /* divide by a plain number */
margin: calc(var(--space) * 2);    /* multiply by a plain number */
height: calc(100vh - (64px + 1rem)); /* parentheses group */

Правило	Валидно	Невалидно
Пробелы вокруг `+` и `-`	`calc(100% - 20px)`	`calc(100%-20px)`
`*`: хотя бы с одной стороны простое число	`calc(2 * 1rem)`	`calc(2px * 3px)`
`/`: длину делят на простое число	`calc(100% / 3)`	`width: calc(300px / 3px)` (не длина)
Единицы должны быть совместимы	`calc(1rem + 10px)`	`calc(1rem + 2s)`

Правило пробелов существует потому, что 100% -20px читалось бы как два отдельных значения, второе из которых отрицательное число. Когда calc() невалиден, все объявление отбрасывается, и элемент сохраняет значение из более ранних правил.

Попробуйте выражение

Введите любое выражение для ширины блока. Браузер покажет, валидно ли оно и какую ширину дало:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>calc tester</title>
  <style>
    body { font-family: system-ui, sans-serif; font-size: 14px; }
    .track { background: #e5e7eb; margin: 10px 0; }
    #box { width: 50%; height: 40px; background: #16a34a; }
  </style>
</head>
<body>
  <label>width: calc(<input id="expr" value="100% - 200px" size="24">)</label>
  <div class="track"><div id="box"></div></div>
  <p id="out"></p>
  <script>
    const input = document.getElementById('expr');
    const box = document.getElementById('box');
    const update = () => {
      const value = 'calc(' + input.value + ')';
      const ok = CSS.supports('width', value);
      box.style.width = ok ? value : '';
      document.getElementById('out').textContent = ok
        ? 'valid: ' + box.offsetWidth + 'px of ' + box.parentElement.offsetWidth + 'px'
        : 'invalid: the browser would ignore this declaration';
    };
    input.addEventListener('input', update);
    update();
  </script>
</body>
</html>

Попробуйте 100%-200px (невалидно, нет пробелов), 100% / 3, 50% + 4rem, 2 * 120px, 200px * 2px (невалидно) и (100% - 40px) / 2.

calc() с CSS-переменными

Переменные и calc() хорошо работают вместе: храните базовое значение один раз и выводите из него остальные. Переменная без единиц становится длиной, если умножить ее на одну единицу:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>calc and variables</title>
  <style>
    body { font-family: system-ui, sans-serif; }
    :root { --space: 8px; --cols: 3; }
    .grid {
      display: grid;
      grid-template-columns: repeat(var(--cols), 1fr);
      gap: calc(var(--space) * 2);        /* 16px */
      padding: calc(var(--space) * 3);    /* 24px */
      background: #e5e7eb;
    }
    .grid div {
      height: calc(var(--cols) * 20px);   /* unitless 3 becomes 60px */
      background: #2563eb;
    }
  </style>
</head>
<body>
  <div class="grid"><div></div><div></div><div></div></div>
  <p id="out"></p>
  <script>
    const g = getComputedStyle(document.querySelector('.grid'));
    const cell = getComputedStyle(document.querySelector('.grid div'));
    document.getElementById('out').textContent = 'gap ' + g.columnGap + ', padding ' + g.paddingTop + ', cell height ' + cell.height;
  </script>
</body>
</html>

Измените --space на 12px или --cols на 4, и все производные значения последуют за ними. Объявление и область видимости переменных разобраны на странице про переменные CSS.

Типичные применения

Задача	calc()
Заполнить пространство рядом с элементом фиксированной ширины	`width: calc(100% - 240px)`
Секция под фиксированной шапкой	`min-height: calc(100vh - 64px)`
Половина ширины минус половина промежутка	`width: calc(50% - 8px)`
Центрировать абсолютно позиционированный блок 100px	`left: calc(50% - 50px)`
Размер шрифта, который немного растет с экраном	`font-size: calc(1rem + 0.5vw)`
Превратить числовую переменную в длину	`calc(var(--n) * 1px)`
Отрицательное значение переменной	`calc(var(--space) * -1)`

Для значения, которое должно оставаться в пределах, используйте clamp(): она принимает те же вычисления в аргументах без записи calc().

Где работает calc()

Везде, где допустимы длина, проценты, число, угол или время: width, margin, padding, top, font-size, line-height, размеры дорожек grid, transition-delay и углы внутри transform. calc() можно вкладывать, и вложенный calc() равнозначен обычным скобкам.

Хороший пример это углы. У каждой риски ниже свой --i (от 0 до 11), и одно правило превращает его в угол через calc(var(--i) * 30deg):

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>calc angles</title>
  <style>
    .dial { position: relative; width: 160px; height: 160px; border-radius: 50%; background: #e5e7eb; }
    .tick {
      position: absolute;
      top: 10px;
      left: calc(50% - 2px);          /* center a 4px wide tick */
      width: 4px;
      height: 16px;
      background: #111827;
      transform-origin: 2px 70px;     /* the center of the dial */
      transform: rotate(calc(var(--i) * 30deg));
    }
  </style>
</head>
<body>
  <div class="dial" id="dial"></div>
  <p id="out"></p>
  <script>
    const dial = document.getElementById('dial');
    for (let i = 0; i < 12; i++) dial.insertAdjacentHTML('beforeend', '<div class="tick" style="--i: ' + i + '"></div>');
    document.getElementById('out').textContent = 'tick 3 transform: ' + getComputedStyle(dial.children[3]).transform;
  </script>
</body>
</html>

Риска 3 получает rotate(90deg), который Chrome показывает как матрицу matrix(0, 1, -1, 0, 0, 0): четверть оборота. left: calc(50% - 2px) центрирует каждую риску, вычитая половину ее собственной ширины 4px.

Частые ошибки

Нет пробелов вокруг - или +. calc(100%-20px) невалидно и игнорируется.
Умножение двух длин. calc(10px * 2px) в CSS не имеет смысла. Одна сторона * должна быть простым числом.
calc() для процентной высоты без высоты у родителя. calc(100% - 20px) для height, как и height: 100%, требует родителя с заданной высотой.
calc() там, где справился бы flexbox или grid. width: calc(33.333% - 10px) для колонок хрупко; display: grid; grid-template-columns: repeat(3, 1fr); gap: 15px обходится без вычислений.
Ожидание сообщения об ошибке. Браузер не предупреждает о невалидном calc(). Проверьте элемент в инструментах разработчика: невалидное объявление показано зачеркнутым.

Часто задаваемые вопросы

Что делает calc() в CSS?

Вычисляет значение из выражения с +, -, * и / и может смешивать единицы, которые браузер узнает только при раскладке. width: calc(100% - 200px) это полная ширина родителя минус 200px, какой бы ни была ширина родителя.

Почему не работает calc()?

Самая частая причина: нет пробелов. Вокруг + и - должны быть пробелы с обеих сторон, поэтому calc(100%-20px) невалидно. Другие причины: умножение двух длин (10px * 2px) или деление на длину, что не дает длины. Невалидный calc() делает невалидным все объявление, и браузер его игнорирует.

Можно ли использовать CSS-переменные в calc()?

Да. calc(var(--gap) * 2) удваивает переменную, а calc(var(--columns) * 1px) превращает число без единиц в пиксели. Сначала подставляется значение переменной, а затем выполняется вычисление.

Нужны ли пробелы вокруг * и / в calc()?

Нет. Пробелы обязательны только вокруг + и -, потому что без них -20px читалось бы как отрицательное число. Пробелы вокруг * и / необязательны, но писать их везде проще всего запомнить.

Чем calc() отличается от clamp()?

calc() вычисляет одно значение из выражения. clamp(MIN, VAL, MAX) удерживает значение между двумя пределами. Они сочетаются: каждый аргумент clamp() уже может содержать вычисления в стиле calc, например clamp(1rem, 1rem + 2vw, 3rem).

Связанные концепции