⚙️ Что такое calc() в CSS и зачем он используется?

calc() — это функция в CSS, которая позволяет выполнять математические операции прямо внутри значений свойств. Она особенно полезна при адаптивной вёрстке, где нужно совмещать относительные и абсолютные единицы.

➡️ Пример:

.container {
  width: calc(100% - 40px); /* Отнимаем фиксированное значение от полной ширины */
  padding: 20px;
}

🗣️ В этом примере .container будет растягиваться на всю ширину родителя, но с учётом внутренних отступов. calc() позволяет легко комбинировать %, px, rem и другие единицы без необходимости дополнительных обёрток или JavaScript.

Можно использовать в width, height, margin, padding, font-size и других свойствах.

🖥 Подробнее тут