Теория — Урок 17

Главная идея

В уроке 15 мы выяснили: по умолчанию width задаёт ширину только содержимого (content), а padding и border прибавляются сверху. Из-за этого блок с width: 300px на экране занимает больше 300px. Свойство box-sizing позволяет изменить это правило, а overflow — управлять содержимым, которое не помещается внутрь блока. Вместе эти два свойства убирают главный источник «магических» лишних пикселей в вёрстке.

Представь, что заказываешь рамку для фотографии и говоришь «ширина 30 см». В режиме content-box мастер делает фотографию 30 см, а потом добавляет паспарту (padding) и деревянную раму (border) — готовое изделие выходит шире 30 см и не влезает в нишу на стене. В режиме border-box ты говоришь «всё изделие вместе с рамой — 30 см», и мастер ужимает фотографию так, чтобы итог был ровно 30 см. Второй способ предсказуем: сколько заказал — столько и получил.

content-box против border-box

Оба блока ниже имеют width: 240px; padding: 24px; border: 4px solid. Разница только в box-sizing — и фактическая ширина различается на 56px:

border 4px

padding 24px

content 240px
= итого 296px (content-box)

Та же запись с border-box: рамка и padding «съедают» часть содержимого, но внешний размер остаётся ровно 240px:

border 4px

padding 24px

content 184px
= итого 240px (border-box)

content-box — стандарт по умолчанию. Формула: реальная ширина = width + padding(лево+право) + border(лево+право). Удобно, когда важен точный размер именно содержимого.
border-box — width уже включает padding и border. Содержимое автоматически сжимается, чтобы внешний размер совпал с заданным. Удобно для сеток и колонок: width: 25% реально означает четверть, даже с отступами.

Глобальный сброс box-sizing

Считать арифметику для каждого блока утомительно, поэтому почти все современные проекты включают border-box один раз для всех элементов сразу:

*,
*::before,
*::after {
  box-sizing: border-box;
}

⚠️ Проверить по документации (MDN: box-sizing): глобальный сброс *{box-sizing:border-box} вместе с псевдоэлементами ::before/::after — это устоявшаяся практика сообщества, а не часть базовой темы урока. Перед применением в учебном проекте сверьтесь с гайдом проекта.

Ограничители размера: min/max

Помимо фиксированной width, размер можно ограничить «вилкой»:

max-width — блок не станет шире указанного, даже если места много. Любимое средство для читаемой колонки текста (max-width: 70ch).
min-width — блок не станет уже, даже если содержимого мало.
min-height / max-height — то же по вертикали. min-height задаёт «не меньше», но разрешает блоку расти под длинный текст.

overflow: что делать с лишним содержимым

Когда содержимое не влезает в блок фиксированного размера, его судьбу решает overflow:

visible (по умолчанию) — лишнее торчит наружу поверх соседей.
hidden — лишнее обрезается и становится невидимым (прокрутки нет).
scroll — полосы прокрутки появляются всегда, даже если контент влезает.
auto — браузер добавляет полосы только когда нужно. Самый частый выбор.

Есть и осевые варианты: overflow-x и overflow-y управляют горизонтальной и вертикальной осью по отдельности.

⚠️ Проверить по документации (MDN: overflow-x/overflow-y и text-overflow): раздельные оси overflow-x/overflow-y и обрезка текста многоточием text-overflow: ellipsis — дополнение за рамками базовой темы урока.

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

border-box — практически всегда, глобальным сбросом в начале проекта.
overflow: auto — блок с потенциально длинным содержимым (лента, таблица, код).
overflow: hidden — обрезать фон/картинку по скруглённым углам, спрятать декор.
max-width: 100% на изображениях — обязательная защита макета.

Частая ошибка

Поставить блоку жёсткую height и забыть про overflow: длинный текст (например, после перевода на другой язык) вылезет за рамку и наедет на соседние элементы. Решение — использовать min-height вместо height либо добавить overflow: auto.

Проверка: откройте любой блок в DevTools (F12), на вкладке Computed найдите box-sizing и overflow — и объясните, какой CSS даёт текущее поведение.

Урок 17. Теория: box-sizing, размеры и overflow