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

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

Браузер видит каждый HTML-элемент как коробку — прямоугольник с вложенными слоями. Самый внутренний слой — content, это область с текстом, изображением или другим содержимым. Её размеры задаются свойствами width и height. Вокруг content идёт padding — внутренние отступы, которые создают пустое пространство между содержимым и границей.

Далее следует border — рамка, которая обрамляет padding и content. Она может быть толстой, цветной или пунктирной. Самый внешний слой — margin, внешние отступы, которые отделяют элемент от соседей. В стандартной модели общий размер элемента = content + padding + border + margin. Это приводит к сюрпризам: если задать width: 200px и добавить padding 20px, итоговая ширина станет 240px.

Рассмотрим пример: div с текстом. Без стилей он занимает всю ширину родителя. Добавим width: 300px; padding: 10px; border: 5px solid; margin: 15px. Браузер посчитает ширину как 300 + 20 (padding) + 10 (border) = 330px, плюс margin снаружи.

Вот структура в виде списка:

• Content: текст или изображение, управляется width, height, font-size.
• Padding: внутренние отступы, padding: 10px добавит 10px со всех сторон.
• Border: рамка, border: 2px solid black рисует линию.
• Margin: внешние поля, margin: 20px отталкивает соседей.

Свойство box-sizing и его роль

По умолчанию CSS использует content-box — стандартную модель, где width применяется только к content. Это часто вызывает проблемы: элемент “вздувается” при добавлении padding или border. Альтернатива — border-box: width включает content + padding + border. Margin остаётся снаружи.

Представьте кнопку: width: 200px; padding: 15px; border: 1px. В content-box итог ~232px, в border-box ровно 200px — удобнее для сеток. Большинство современных проектов используют border-box глобально через * { box-sizing: border-box; }. Это упрощает расчёты и делает вёрстку предсказуемой.

Пример кода:

* {
  box-sizing: border-box;
}
.button {
  width: 200px;
  padding: 15px;
  border: 1px solid;
}

Здесь кнопка всегда 200px, независимо от padding.

Ключевые значения:

• box-sizing: content-box — стандарт, width только для content.
• box-sizing: border-box — width для всего внутри margin.
• Примечание: margin не меняет box-sizing, всегда снаружи.

Отступы: padding и margin в деталях

Padding создаёт пространство внутри элемента, между content и border. Оно влияет на фон: цвет или изображение растягивается до border. Используйте padding: 10px 20px 10px 20px для top/right/bottom/left или shorthand padding: 10px 20px.

Margin работает снаружи, не влияет на фон элемента. Соседние margin часто схлопываются (margin collapse): вертикальные значения берутся максимум из двух. Горизонтальные не схлопываются. Отрицательные margin сдвигают элементы навстречу.

Пример с карточкой: padding внутри для текста, margin для разделения от других карточек. В сетке 12 колонок margin помогает создать гуттеры.

Правила отступов:

• padding: 0 убирает внутренние пробелы у инпутов.
• margin: auto центрирует блочные элементы по горизонтали.
• Схлопывание: margin-top: 20px и margin-bottom: 30px родителя = 30px.

Типичные ошибки и как их избежать

Новички забывают про box-sizing: задают width контейнера, добавляют padding — и всё ломается на мобильных. Решение: всегда border-box. Ещё проблема — inline-элементы: у них margin/padding работают не полностью, игнорируя top/bottom.

Блочные элементы (display: block) занимают всю ширину, inline — только контент. Используйте display: inline-block для кнопок в строке с отступами. Проверяйте в DevTools: там видно все слои модели.

Частые промахи:

• Игнор border в расчётах ширины.
• Схлопывание margin в вертикальном стеке.
• Забытый box-sizing на формах.

Почему блочная модель меняет подход к верстке

Блочная модель — фундамент Flexbox и Grid, где padding/margin усиливают контроль. Она объясняет, почему старые сайты “плавают”, а современные — точны. Остаётся копнуть display: flex/grid, как они взаимодействуют с box.

Дальше думайте о реальных проектах: протестируйте border-box на своём коде, поиграйтесь с margin в колонках. Это база для любого фронтендера.