Что такое блочная модель CSS: полный разбор для верстальщиков

hannadev

Блочная модель в CSS — это основа, которая определяет, как элементы занимают место на странице. Она помогает понять размеры блоков и их взаимодействие. Зная её, вы избежите проблем с отступами и шириной.

Эта модель решает типичные боли верстальщиков: блоки не влезают в контейнер, отступы сливаются или неожиданно растягиваются. Мы разберём состав, типы и свойства, чтобы вы могли точно контролировать layout.

Как устроена блочная модель

Блочная модель представляет каждый элемент как прямоугольник, состоящий из нескольких слоёв. В центре — содержимое (content), где размещается текст, изображения или другие элементы. Вокруг него внутренние отступы (padding), затем граница (border) и внешние отступы (margin). Браузер рассчитывает общий размер именно по этой схеме.

Представьте div с текстом: если задать width: 200px, это ширина только content. Добавьте padding 20px и border 1px — итоговая ширина станет 242px. Такие неожиданности часто ломают адаптив. Чтобы всё работало предсказуемо, важно знать, как свойства влияют друг на друга.

Это подводит к ключевым компонентам. Вот они в деталях:

Content: базовая область для контента. Размеры задаются width и height. По умолчанию подстраивается под содержимое.
Padding: пустое пространство внутри блока. Увеличивает размер, но не влияет на позиционирование соседей.
Border: рамка вокруг padding. Толщина добавляется к общему размеру.
Margin: внешние отступы. Могут сливаться (margin collapse) у блочных элементов.

Стандартная и альтернативная модели

По умолчанию CSS использует content-box: указанные width и height применяются только к содержимому. Padding и border добавляются сверху, что часто приводит к переполнению контейнера. Например, в мобильной верстке блок с padding 15px может вылезти за 100% ширины.

Альтернатива — border-box: размеры включают padding и border. Это удобнее для быстрой верстки. Старые IE работали именно так, и теперь это популярный выбор. Переходите на него глобально: * { box-sizing: border-box; } — и жизнь станет проще.

Сравним модели в таблице:

Модель	Что включает width	Пример (width:200px, padding:20px, border:1px)	Когда использовать
content-box	Только content	Итог: 242px	Точная работа с контентом
border-box	Content + padding + border	Итог: 200px	Адаптив, сетки

Примечание: outline не влияет на размеры, это внешняя рамка.

Типы элементов и display

Элементы делятся на блочные (display: block), строчные (display: inline) и строчно-блочные (display: inline-block). Блочные занимают всю ширину родителя, всегда с новой строки. Строчные текут в линию, игнорируют width/height и вертикальный margin/padding.

Возьмём меню: li с inline-block идеально встанут в ряд с заданной шириной. А div с block растянется на всю строку. Неправильный display — частая причина сломанных layouts. Меняйте его осознанно.

Ключевые отличия в списке:

Block: новая строка, полная ширина, все свойства работают.
Inline: в строке, ширина/высота по контенту, margin/padding частично игнорируются.
Inline-block: как inline, но уважает width/height и все отступы.

Свойства, которые меняют игру

Основные свойства — width/height, padding, border, margin. Они задаются в px, %, em, rem и т.д. Auto для width делает блок на всю ширину, 0 для margin убирает отступы. Отрицательные margin возможны, но осторожно — сдвигают элементы.

Пример: контейнер 960px, внутри p с max-width: 60% — абзац не шире 576px. Добавьте margin: 0 auto — центрирование. Такие комбинации решают 80% задач layout.

Таблица частых значений:

Свойство	Пример	Эффект
padding	padding: 20px;	Равномерно 20px внутри
margin	margin: 0 auto;	Центрирование блока
border	border: 1px solid black;	Рамка 1px
box-sizing	border-box	Удобный расчёт размеров

Почему это важно? Без контроля свойств блоки «плавают», особенно на разных экранах.

Расчёт размеров в реальных проектах

Когда верстаете сетку, суммируйте: общая ширина = content + padding2 + border2 + margin*2. Для flex/grid это упрощается, но базовая модель никуда не девается. Тестируйте в DevTools — там визуализируется каждый слой.

В адаптиве используйте min/max-width и проценты. Проблема: на маленьких экранах padding может сломать. Решение — медиа-запросы или clamp(). Это сохранит читаемость.

Практические советы:

Глобальный box-sizing: border-box.
Margin для расстояний между блоками, padding внутри.
Избегайте фиксированных px в мобильной верстке — берите rem.

За рамками базовой модели

Мы разобрали основы, но блочная модель взаимодействует с Flexbox, Grid и позиционированием. Там появляются нюансы вроде margin collapsing только для block. Стоит углубиться в эти темы, чтобы освоить сложные layouts.

Дальше думайте о производительности: слишком толстые border и padding тормозят рендер. Экспериментируйте в инструментах разработчика — это лучший способ понять, как всё работает на практике.