CSS функция calc()

Определение и применение

CSS функция calc() позволяет выполнять математические расчеты для определения значений свойств CSS.

Попробуйте функцию calc()

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

Функция и ширина контейнера
Значение width
Размер блока

.sample {
  width: calc(100% - 40px);
}
HTML примера
HTML
<div class="container">
  <div class="sample">Размер блока</div>
</div>

Складывать можно совместимые типы: calc(100% - 2rem) допустим для ширины, а calc(10px + 2s) — нет. Умножение длины на число и деление длины на число сохраняют длину. Типизированная арифметика допускает и calc(100vw / 1px) с числовым результатом; поддержку этого расширения проверяйте отдельно.

Действуют обычный порядок операций и круглые скобки. Для + и - нужны пробелы с обеих сторон. Обычный calc() не вычисляет auto и другие внутренние размеры; для них существует отдельная функция calc-size() с ограниченной поддержкой.

Поддержка браузерами

Спецификация: CSS values

Поддерживается во всех основных браузерах с 2015 года.

Отдельные значения (1) поддерживаются не везде — смотрите таблицу.

Показать браузеры
Совместимостьcss.types.calc
ВозможностьКомпьютерыМобильные
ChromeEdgeFirefoxOperaSafariChrome AndroidFirefox for AndroidOpera AndroidSafari on iOSSamsung BrowserWebView AndroidWebView on iOS
calc✓26✓12✓16✓15✓7✓28✓16✓14✓7✓1.5✓4.4✓7
Color component support✓119✓119✓128✓105✓16.4✓119✓128✓79✓16.4✓25.0✓119✓16.4
Gradient color stops support✓19✓12✓19✓15✓6✓28✓19✓15✓6✓1.5✓37✓6
nested✓51✓16✓48✓38✓11✓51✓48✓41✓11✓5.0✓51✓11
&lt;number&gt; value support✓31✓12✓48✓18✓6✓31✓48✓18✓6✓2.0✓4.4.3✓6
Divisions between typed values produce unitless number ("typed arithmetic")✓140✓140×✓124✓26✓140×✓92✓26✓30.0✓140✓26

поддерживаетсяс ограниченияминет поддержкинет данных≤31 — не позднее версии 31

CSS синтаксис:

JavaScript
calc(математическое выражение);
/* в качестве операндов могут выступать значения length | frequency | angle | time | number | integer */

Значения функции

Значение Описание
expression
(выражение) 		Математическое выражение. Результат этого выражения будет использоваться в качестве конечного значения. Является обязательным значением.

Допускается использовать следующие операторы:

  1. + (сложение). Оператор должен разделяться пробелами с обеих сторон.
  2. - (вычитание). Оператор должен разделяться пробелами с обеих сторон.
  3. * (умножение). Оператор не требует пробела между значениями, но рекомендуется их добавлять.
  4. / (деление). Оператор не требует пробела между значениями, но рекомендуется их добавлять. Не используйте нулевой делитель для обычной раскладки: современная арифметика CSS определяет бесконечности и NaN, которые затем ограничиваются по правилам контекста.

Версия CSS

CSS 3

Примеры, попробуйте сами

Ширина с постоянным отступом

Измените 48px. Ширина блока вычисляется из ширины контейнера и фиксированного вычета.

base.css
CSS
* {
    box-sizing: border-box;
}
body {
    margin: 16px;
    font:
        16px/1.5 system-ui,
        sans-serif;
    color: #24364b;
    overflow-wrap: anywhere;
}
section {
    margin-block: 16px;
    padding: 12px;
    border: 1px solid #a8b8c7;
}
p {
    padding: 8px;
}
label {
    display: block;
    margin-block: 12px;
}
input,
button {
    max-width: 100%;
    font: inherit;
    padding: 8px;
}
input[type='checkbox'] + label {
    display: inline;
}
a {
    color: #135fb5;
}
.container {
    background: #edf2f5;
    padding: 12px 0;
}
.sample {
    background: #c5dbea;
    padding: 12px;
}
index.html
HTML
<!doctype html>
<html lang="ru">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>Ширина с постоянным отступом</title>
  </head>
  <body>
    <div class="container"><div class="sample">Результат</div></div>
  </body>
</html>
style.css
CSS
.sample {
    width: calc(100% - 48px);
}

Две колонки с промежутком

Если меняете промежуток, измените и gap, и вычитаемое значение в calc. Обе колонки вместе с промежутком занимают всю ширину.

base.css
CSS
* {
    box-sizing: border-box;
}
body {
    margin: 16px;
    font:
        16px/1.5 system-ui,
        sans-serif;
    color: #24364b;
    overflow-wrap: anywhere;
}
section {
    margin-block: 16px;
    padding: 12px;
    border: 1px solid #a8b8c7;
}
p {
    padding: 8px;
}
label {
    display: block;
    margin-block: 12px;
}
input,
button {
    max-width: 100%;
    font: inherit;
    padding: 8px;
}
input[type='checkbox'] + label {
    display: inline;
}
a {
    color: #135fb5;
}
.columns > div {
    padding: 12px;
    background: #c5dbea;
    min-width: 0;
    overflow-wrap: anywhere;
}
index.html
HTML
<!doctype html>
<html lang="ru">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>Две колонки с промежутком</title>
  </head>
  <body>
    <div class="columns">
      <div>Колонка A</div>
      <div>Колонка B</div>
    </div>
  </body>
</html>
style.css
CSS
.columns {
    display: flex;
    gap: 16px;
}
.columns > div {
    width: calc((100% - 16px) / 2);
}

Резерв var() и неверный тип

Второй блок получает auto: переменная существует, но её тип не подходит ширине. Замените red на 40px — оба блока станут одинаковыми. Удалите переменную — сработает резерв var().

base.css
CSS
* {
    box-sizing: border-box;
}
body {
    margin: 16px;
    font:
        16px/1.5 system-ui,
        sans-serif;
    color: #24364b;
    overflow-wrap: anywhere;
}
.frame {
    width: 280px;
    max-width: 100%;
}
.box {
    padding-block: 12px;
    margin-block: 10px;
    background: #d6ecfa;
}
index.html
HTML
<!doctype html>
<html lang="ru">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>Резерв var() и неверный тип</title>
  </head>
  <body>
    <div class="frame">
      <div class="box good">Подходящая длина</div>
      <div class="box bad">Переменная с неподходящим типом</div>
    </div>
  </body>
</html>
style.css
CSS
.box {
    width: 100px;
    width: calc(100% - var(--gap, 40px));
}
.good {
    --gap: 40px;
}
.bad {
    --gap: red;
}