Справочник CSS

calc(): вычисления размеров в CSS

calc() позволяет браузеру вычислить значение во время раскладки. Главная польза — сочетание разных единиц, например ширины в процентах и фиксированного отступа.

Рабочий пример

.content {
  min-height: calc(100vh - 72px);
  width: calc(100% - 2 * 24px);
}

Вокруг плюса и минуса обязательны пробелы. Современный CSS поддерживает базовые арифметические операции, но результат должен иметь допустимый для свойства тип.

Когда применять

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

Проверь пример самостоятельно: измени исходные данные, убери одну строку и сравни результат. Такой короткий эксперимент помогает увидеть роль каждого свойства или метода и не превращает обучение в механическое копирование.

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

• Убирать пробелы вокруг + и -
• Смешивать несовместимые типы значений
• Скрывать плохую структуру слишком сложной формулой