calc(): вычисление размера из совместимых величин
Функция calc позволяет записать вычисление непосредственно в CSS-значении. Частый сценарий — вычесть постоянный отступ из доступной ширины контейнера.
Назначение
Функция calc позволяет записать вычисление непосредственно в CSS-значении. Частый сценарий — вычесть постоянный отступ из доступной ширины контейнера.
Как это работает
Браузер вычисляет выражение в контексте свойства и его процентной базы. Для сложения и вычитания нужны пробелы вокруг операторов. Box-sizing определяет, входят ли рамка и внутренние отступы в указанную ширину.
Пример
<style>.frame{padding:12px;background:#edf4ef}.calc-card{box-sizing:border-box;width:calc(100% - 2rem);margin-inline:auto;padding:16px;border:2px solid #11694e;background:white}</style>
<div class="frame"><div class="calc-card">Ширина с местом для боковых промежутков.</div></div>Что должно получиться
Карточка занимает ширину содержимого родителя за вычетом 2rem; автоматические отступы делят оставшееся место. Благодаря border-box рамка не увеличивает заданную внешнюю ширину карточки.
Граница применения и частая ошибка
Процент не всегда относится к окну браузера. Не добавляйте calc там, где обычный padding, gap или Grid точнее выражает задачу. Для очень узкого контейнера проверьте итоговый размер и минимальную ширину содержимого.
Самостоятельная проверка
Замените ширину родителя и размер шрифта корневого элемента. Сравните результаты с border-box и content-box, затем объясните, от какой области взяты 100% в этом примере.
HTML и CSS можно изменить в песочнице ниже. Она изолирована: JavaScript, внешние ресурсы и отправка форм отключены. Проверки печати, загрузки файлов и сетевых ответов выполняйте в отдельном учебном проекте.