Урок 15. Теория: Блочная модель: content, padding, border, margin

📁 Раздел: Блочная модель и позиционирование ⏱️ Время изучения: ~45 мин 🎯 Сложность: Начальная
#width #padding #border #margin

⚡ Кратко

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

  • width/height по умолчанию задают размер content, а не всего блока.
  • Реальная ширина = content + padding слева/справа + border слева/справа.
  • Вертикальные margin соседей схлопываются: остаётся больший, а не сумма.
  • Включи блочную модель в DevTools — увидишь все четыре слоя на любом элементе.

Главная идея

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

Представь подарок, который отправляют почтой. Content — сам подарок. Padding — мягкая упаковка вокруг него, чтобы не болтался. Border — стенки картонной коробки. Margin — свободное место на складе, которое коробка держит вокруг себя, чтобы не прижиматься к соседним посылкам. Меняя каждый слой, ты меняешь либо размер «начинки», либо воздух вокруг неё.

Четыре слоя по порядку

Слои идут строго изнутри наружу. Вот та же коробка в виде схемы:

margin — внешний отступ
border — рамка
padding — внутренний отступ
content
width × height
  • content — область с текстом, картинкой или вложенными элементами. Именно её размер задают width и height в стандартной модели.
  • padding — прозрачный отступ между содержимым и рамкой. Фон элемента заходит под padding, поэтому он выглядит как «воздух внутри» цветного блока.
  • border — видимая рамка вокруг padding. Имеет толщину, стиль и цвет и тоже добавляется к итоговому размеру блока.
  • margin — прозрачное расстояние снаружи, отодвигающее элемент от соседей. Фон сюда уже не заходит.

Откуда берётся «лишняя» ширина

Главная ловушка новичка: задаёшь width: 320px, а блок занимает 372px. Почему? В стандартной модели width — это только content. Всё остальное прибавляется сверху:

/* итоговая ширина = 320 + 2×24 (padding) + 2×2 (border) = 372px */
.card {
  width: 320px;
  padding: 24px;
  border: 2px solid #0f766e;
}
Решение в уроке 17: свойство box-sizing: border-box заставляет width включать padding и border — тогда блок остаётся ровно 320px.

Схлопывание вертикальных margin

Вертикальные (верх/низ) margin двух соседних блоков не складываются — остаётся больший из двух. Это называется collapse и часто удивляет.

.first  { margin-bottom: 40px; }
.second { margin-top: 24px; }
/* Между блоками будет 40px, а НЕ 64px */
Важно: схлопываются только вертикальные margin блочных элементов. Горизонтальные margin и margin внутри flex/grid-контейнеров не схлопываются.

Как увидеть модель своими глазами

Самый быстрый способ понять, откуда взялись размеры, — DevTools. Открой инспектор (F12), выбери элемент и посмотри на цветную диаграмму внизу панели Styles: синий — content, зелёный — padding, жёлтый — margin. Наведи на любой слой — браузер подсветит его на странице.

Проверка себя: найди на любом сайте элемент с заметным отступом и определи в DevTools — это padding или margin? Объясни, какой CSS его создал.