Из чего состоит блочная модель элемента

Блочная модель элемента (Box Model)

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

Четыре компонента блочной модели

Блочная модель состоит из следующих слоёв (от центра к краям):

1. Content (Содержимое) — основной слой, где размещается содержимое элемента (текст, изображения, дочерние элементы). Размер определяется свойствами width и height.

2. Padding (Внутренний отступ) — прозрачное пространство между содержимым и границей элемента. Наследует фоновый цвет элемента. Задаётся через padding, padding-top, padding-right, padding-bottom, padding-left.

3. Border (Граница) — видимая линия вокруг padding. Определяется свойствами border, border-width, border-style, border-color.

4. Margin (Внешний отступ) — прозрачное пространство за границей элемента. Создаёт расстояние между элементом и соседними элементами. Задаётся через margin, margin-top, margin-right, margin-bottom, margin-left.

Визуальное представление

┌─────────────────────────────────────────┐
│ Margin (внешний отступ)                 │
│  ┌──────────────────────────────────┐   │
│  │ Border (граница)                 │   │
│  │  ┌──────────────────────────┐    │   │
│  │  │ Padding (внутренний      │    │   │
│  │  │ отступ)                  │    │   │
│  │  │  ┌────────────────────┐  │    │   │
│  │  │  │ Content (содержимое)│  │    │   │
│  │  │  └────────────────────┘  │    │   │
│  │  └──────────────────────────┘    │   │
│  └──────────────────────────────────┘   │
└─────────────────────────────────────────┘

Пример с кодом

.box {
  /* Content */
  width: 200px;
  height: 100px;
  
  /* Padding */
  padding: 20px;           /* Все стороны */
  /* или */
  padding-top: 10px;
  padding-right: 20px;
  padding-bottom: 10px;
  padding-left: 20px;
  
  /* Border */
  border: 2px solid black;
  /* или */
  border-width: 2px;
  border-style: solid;
  border-color: black;
  
  /* Margin */
  margin: 15px;            /* Все стороны */
  /* или */
  margin-top: 10px;
  margin-right: 15px;
  margin-bottom: 10px;
  margin-left: 15px;
}

Расчёт общих размеров

Общий размер элемента рассчитывается следующим образом:

Общая ширина = margin-left + border-left + padding-left + width + padding-right + border-right + margin-right
Общая высота = margin-top + border-top + padding-top + height + padding-bottom + border-bottom + margin-bottom

Например, если width = 200px, padding = 20px, border = 2px, margin = 15px, то:

Общая ширина = 15 + 2 + 20 + 200 + 20 + 2 + 15 = 274px

Свойство box-sizing

По умолчанию в CSS используется значение box-sizing: content-box, при котором width и height применяются только к содержимому, а padding и border добавляются к общему размеру.

Для удобства разработки часто используется box-sizing: border-box, при котором width и height включают в себя padding и border:

* {
  box-sizing: border-box;
}

.box {
  width: 200px;    /* Теперь это ширина с учётом padding и border */
  padding: 20px;
  border: 2px solid black;
}

При border-box общая ширина будет 200px (margin не включается).

Margin Collapse

Важный момент — схлопывание маржинов (margin collapse). Вертикальные margin соседних блочных элементов объединяются в один, равный большему из них. Это не происходит для горизонтальных margin или для элементов с display: flex или display: grid.

.box1 { margin-bottom: 20px; }
.box2 { margin-top: 30px; }
/* Расстояние между ними будет 30px, а не 50px */

Практическое применение

В современных проектах часто используется CSS-фреймворк как Tailwind CSS, который предоставляет утилиты для работы с блочной моделью:

<div class="w-56 h-32 p-5 border-2 border-black m-4">
  Содержимое
</div>

Здесь w-56 задаёт ширину, p-5 — padding, border-2 — толщину границы, m-4 — margin.

Понимание блочной модели критически важно для правильной вёрстки и позиционирования элементов в вебе.