Что такое функция calc в CSS

Функция calc() позволяет выполнять математические вычисления прямо в CSS. Она работает с разными единицами измерения (px, %, em, rem и т.д.), автоматически конвертируя их при вычислениях.

.container {
  width: calc(100% - 40px); /* Ширина минус отступы */
  height: calc(100vh - 2rem); /* Высота экрана минус размер шрифта */
  padding: calc(1em + 5px); /* Динамический padding */
}

Особенности:

• Обязательно ставить пробелы вокруг операторов (+, -, *, /)
• Можно комбинировать разные единицы измерения
• Поддерживается во всех современных браузерах
• Полезно для адаптивного дизайна