Модель блока

Как браузер считает размеры элемента: content, padding, border, margin, box-sizing, схлопывание полей и центрирование.

Уровень: начальный 10 разделов 1,5 часа

1. Из чего состоит элемент

Каждый элемент — это четыре «слоя»: контент (content), внутренний отступ (padding), рамка (border) и внешний отступ (margin). Разница между ними проста: padding — расстояние от содержимого до рамки внутрь, margin — расстояние до соседей снаружи.

.card {
  width: 300px;
  padding: 24px;        /* место между текстом и рамкой */
  border: 2px solid #ccc;
  margin: 16px;         /* место вокруг карточки */
}

Запоминайте картинкой: контент — как начинка пирога, padding — тесто вокруг неё, border — формочка, margin — расстояние до других пирогов.

2. box-sizing: content-box и border-box

По умолчанию width задаёт ширину только контента, а padding и border добавляются сверху (content-box). Это ломает сетки: задали 300px, добавили padding — получили 340. box-sizing: border-box включает padding и border в width, и размер стабилен.

.card { width: 300px; }

/* по умолчанию: 300 (content) + 2*2 (border) + 2*24 (padding) = 352px */

.card {
  box-sizing: border-box;
  /* теперь всегда 300px вместе с рамкой и отступами */
}

Практическая норма: box-sizing: border-box задаётся глобально всем элементам через *, а потом, при необходимости, корректируется точечно.

3. Padding и margin по сторонам

Оба свойства можно задать одной строкой (4 значения по часовой: верх, право, низ, лево) или точечно через -top/-right/-bottom/-left. Вокруг них полно знакомых шорткатов.

/* 4 значения: верх право низ лево */
padding: 10px 20px 30px 40px;

/* 2 значения: вертикальные / горизонтальные */
padding: 12px 24px;

/* точечно */
margin-top: 8px;
margin-left: auto;

/* auto по горизонтали — классическое центрирование */
.mx-auto { margin-right: auto; margin-left: auto; }

4. Схлопывание margin

Вертикальные margin соседних блочных элементов не складываются, а сливаются: берётся больший из них. Это «схлопывание» (margin collapsing). Горизонтальные margin никогда не схлопываются.

.box { margin-bottom: 30px; }
.box + .box { margin-top: 20px; }
/* между блоками будет 30px, а не 50px — марджины слились */

работает для вертикальных margin блочных соседей;
не работает у inline-элементов, flex- и grid-детей, у элементов с overflow, кроме visible;
уходит, если блок создаёт контекст форматирования (flex, grid, overflow: hidden).

В современной вёрстке схлопывание редко мешает: внутри flex и grid его нет вовсе. Но классические статьи-стопки (p, h2) строятся именно на этом поведении.

5. Ширина, высота и минимумы

width/height задают желаемый размер, а min-width/min-height and max-width — нижние и верхние границы. Классическая связка max-width: 100% — изображение никогда не выйдет за родителя.

.media img { max-width: 100%; height: auto; }
.text { min-width: 280px; max-width: 65ch; }
.sidebar { min-height: 100px; height: auto; }

max-width + auto по горизонтали — компактный блок по центру;
min-width: 0 в flex/grid разрешает сжатие ниже контента;
высота редко фиксируется: контент диктует её сам.

6. Проценты в отступах

Проценты у width и height зависят от родителя, а проценты у padding и margin — всегда от ширины родителя. Это кажется странным, но даёт удобный трюк: прямоугольное изображение с соотношением сторон через padding-top.

.square {
  position: relative;
  width: 50%;
  padding-bottom: 50%;   /* высота = 50% ширины родителя */
}
.square img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

Трюк с padding был стандартом до появления aspect-ratio. Сегодня для сохранности пропорций используйте aspect-ratio: 1 / 1 — проще и чище.

7. Всё расстояние по-честному

Проверьте конфликт: у элемента видно «дыру» между фоном и содержимым — почти всегда это padding. Отступ сверху «вылезает» за родителя — margin у первого ребёнка. Фон заканчивается, а место сверху есть — задвоенный margin.

.group {
  background: #f1f5f9;
  /* заголовок «прилипает» к верху? значит margin у h2 */
  padding-top: 1px;    /* либо отступ внутри группы */
}

Быстрый осмотр: выделите элемент в DevTools и посморите блок-схему поля size. Верх/низ/лево/право — там наглядно видно, что съедает место.

8. box-sizing в DevTools

В панели Styles DevTools есть переключатель модели блока над правилами: box-sizing: content-box / border-box и кликабельная схема с полями. Меняется на лету, помогает понять цифры.

клик по padding/border в схеме — временно увеличить на глаз;
надпись слева от схемы — текущий размер с учётом всех слоёв;
у каждого элемента свои значения — переключитесь и посмотрите.

9. Частые ошибки

Ошибка	Результат
width задан без border-box	итоговая ширина больше задуманной
margin у первого ребёнка	отступ вылазит за фон родителя
два margin подряд	схлопнулись, между меньше ожидаемого
не указан max-width img	фото растягивает строку за родителя
padding-bottom вместо aspect-ratio	лишний CSS и хрупкость

Почти все лечатся одним правилом: border-box на * и внимательностью к margin у элементов-первенцев (используйте padding родителя вместо margin первого ребёнка).

10. Чек-лист для модели блока

глобальный box-sizing: border-box подключён;
ширина/высота считаются с padding и border;
картинки имеют max-width: 100% (внутри контейнеров);
отступы внутри групп — padding, между группами — margin;
схлопывания продуманы (flex/grid — вне игры);
проценты отступов используются только осознанно.

Что дальше

Курс завершён.

← Вернуться к курсам