Размер блока: Content-Box и Border-Box
Разберитесь, как box-sizing меняет расчёт ширины и высоты с учётом внутренних отступов и границы.
«Размер блока: Content-Box и Border-Box» — бесплатный урок CSS Academy на CoddyKit. Это урок 3 из 4. Ты можешь прочитать весь урок бесплатно ниже — а потом практиковать его прямо в браузере с встроенным редактором кода и ИИ-репетитором 24/7. Это часть пути обучения CSS Academy, и твой прогресс синхронизируется между веб-версией и приложением CoddyKit. Курс CSS Academy содержит 4 уроков всего.
Проблема box-sizing
По умолчанию CSS задаёт width только для области содержимого. Добавление внутреннего отступа или границы увеличивает фактический отображаемый размер элемента, что может приводить к путанице и ошибкам.
<div class="box">200px + padding + border = 244px rendered</div>
content-box (По умолчанию)
box-sizing: content-box — значение по умолчанию. width и height задают только содержимое. Внутренние отступы и граница добавляются сверху, увеличивая элемент сверх заданного размера.
border-box
При использовании box-sizing: border-box значения width и height включают содержимое + внутренний отступ + границу. Элемент сохраняет точно объявленный размер независимо от внутренних отступов и границы.
<div class="box">Exactly 200px rendered width</div>
Универсальный сброс с border-box
Примените border-box глобально с помощью общепринятого сброса:
<div class="demo-box">Width stays exactly 200px</div>
Почему inherit вместо *
Альтернативный шаблон позволяет компонентам при необходимости переопределять box-sizing:
<div class="demo-box">Inherited border-box sizing</div>
Процентная ширина и внутренний отступ
Главное практическое преимущество border-box проявляется при использовании процентной ширины. Элемент с width: 50% и внутренним отступом 20px сохраняет ширину ровно 50% от ширины родителя и не вызывает переполнения.
<div class="col">50% wide column with padding, no overflow</div>
border-box не включает margin
Даже при использовании border-box margin не включается в объявленную ширину. Внешние отступы всегда добавляют пространство за пределами элемента поверх заданных размеров.
История: почему content-box используется по умолчанию
Исторически браузеры по-разному реализовывали блочную модель. W3C стандартизировала content-box, а IE использовал border-box. В современном CSS по умолчанию используется content-box для соответствия стандартам W3C, но практически все проекты переопределяют его на border-box.
Проверка блочной модели в DevTools
В Chrome DevTools на панели Elements отображается схема блочной модели с точными размерами содержимого, внутренних и внешних отступов, а также границы. Это самый быстрый способ выявить проблемы с размерами.
Грид и флексбокс используют border-box внутри
CSS-грид и флексбокс всегда задают размеры дорожек и элементов по правилам border-box независимо от собственной настройки box-sizing элемента. Это делает расчёт размеров предсказуемым.
min/max с border-box
min-width, max-width, min-height и max-height работают так же, как width: при активном border-box они включают внутренние отступы и границу.
Быстрая проверка
При использовании box-sizing: border-box какой будет ширина области содержимого у элемента с объявленными width: 300px; padding: 30px;?
Итоги
box-sizing: border-box включает внутренние отступы и границу в объявленную ширину, предотвращая неожиданное увеличение размера. Применяйте его глобально с помощью *, *::before, *::after { box-sizing: border-box }. Внешние отступы никогда не включаются ни в одну из моделей блока.
Часто задаваемые вопросы
Урок «Размер блока: Content-Box и Border-Box» бесплатный?
Да — полный текст урока «Размер блока: Content-Box и Border-Box» бесплатно доступен здесь в веб-версии. Чтобы практиковать его интерактивно (встроенный редактор кода и ИИ-репетитор 24/7) и разблокировать остальной курс CSS Academy, подпишись на CoddyKit PRO. Курс CSS Academy содержит 4 уроков всего.
Чему я научусь в уроке «Размер блока: Content-Box и Border-Box»?
Разберитесь, как box-sizing меняет расчёт ширины и высоты с учётом внутренних отступов и границы. Ты практикуешь CSS Academy с помощью реального кода, который запускаешь прямо в браузере, и ИИ-репетитор 24/7 отвечает на твои вопросы во время урока.
Нужен ли мне опыт, чтобы начать CSS Academy?
Предыдущий опыт не требуется. CSS Academy на CoddyKit структурирован для всех уровней — от новичков до продвинутых, поэтому ты можешь начать отсюда или с самого начала и учиться в своем темпе. Это урок 3 из 4.
Сколько времени занимает урок «Размер блока: Content-Box и Border-Box»?
Большинство уроков CoddyKit занимают около 5–10 минут. Каждый из них компактный и интерактивный, поэтому ты постоянно делаешь прогресс и продолжаешь с того же места в веб-версии и приложении.
Можно ли писать и запускать код в этом уроке CSS Academy?
Да. Каждый урок CSS Academy включает встроенный редактор кода, поэтому ты пишешь и запускаешь реальный код прямо в браузере и получаешь моментальную обратную связь от AI — локальная установка не требуется.
Все уроки этого курса
- Понимание ширины, высоты, внешних и внутренних отступов
- Стили, ширина и цвет границ
- Размер блока: Content-Box и Border-Box
- Контур и тень блока