Что такое блочная модель?

Блочная модель в CSS

Блочная модель (Box Model) - это фундаментальная концепция CSS, которая описывает, как браузер рассчитывает размеры и расстояния между элементами. Каждый HTML элемент представляется прямоугольным боксом, состоящим из четырех слоев.

Структура блочной модели

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

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

1. Content (Содержимое)

Внутри находится текст, изображения, другие элементы:

.box {
  width: 200px;    /* Ширина содержимого */
  height: 100px;   /* Высота содержимого */
}

2. Padding (Внутренний отступ)

Пространство между содержимым и границей:

.box {
  padding: 20px;           /* Все стороны */
  padding: 10px 20px;      /* Вверх/вниз - 10px, влево/вправо - 20px */
  padding: 10px 20px 30px; /* Верх - 10px, слева/справа - 20px, низ - 30px */
  padding: 10px 20px 30px 40px; /* Верх, справа, низ, слева */
  
  /* Или отдельно */
  padding-top: 10px;
  padding-right: 20px;
  padding-bottom: 30px;
  padding-left: 40px;
}

3. Border (Граница)

Линия вокруг элемента:

.box {
  border: 2px solid black;        /* Ширина, стиль, цвет */
  border: 1px dashed gray;        /* Пунктирная граница */
  border: 3px double blue;        /* Двойная граница */
  
  /* Или отдельно */
  border-top: 2px solid red;
  border-right: 2px solid green;
  border-bottom: 2px solid blue;
  border-left: 2px solid yellow;
  
  /* Скругление углов */
  border-radius: 8px;
}

4. Margin (Внешний отступ)

Растояние между элементом и соседними элементами:

.box {
  margin: 20px;              /* Все стороны */
  margin: 10px 20px;         /* Вверх/вниз - 10px, влево/вправо - 20px */
  margin: 10px 20px 30px 40px; /* Верх, справа, низ, слева */
  
  /* Или отдельно */
  margin-top: 10px;
  margin-right: 20px;
  margin-bottom: 30px;
  margin-left: 40px;
  
  /* Центрирование по горизонтали */
  margin: 0 auto;
}

Расчет полного размера элемента

Содержимое:

Width = content-width
Height = content-height

С padding:

Width = content-width + padding-left + padding-right
Height = content-height + padding-top + padding-bottom

С border:

Width = content-width + padding-left + padding-right + border-left + border-right
Height = content-height + padding-top + padding-bottom + border-top + border-bottom

С margin:

Общее место, занимаемое на странице:
Width = content + padding-left + padding-right + border-left + border-right + margin-left + margin-right
Height = content + padding-top + padding-bottom + border-top + border-bottom + margin-top + margin-bottom

Практический пример

.button {
  width: 100px;           /* Content: 100px */
  padding: 10px;          /* +10px со всех сторон */
  border: 2px solid;      /* +2px со всех сторон */
  margin: 20px;           /* +20px со всех сторон */
}

Расчет:
Content width = 100px
Padding = 10px + 10px = 20px
Border = 2px + 2px = 4px
────────────────────────
Всего внутри бокса = 100 + 20 + 4 = 124px

Margin добавляется к расстоянию от других элементов

box-sizing: важное свойство

По умолчанию width и height применяются только к content. Это может быть неудобно:

/* ❌ По умолчанию: content-box */
.box {
  box-sizing: content-box;
  width: 100px;
  padding: 10px;
  border: 2px solid;
  /* Общая ширина = 100 + 10 + 10 + 2 + 2 = 124px */
}

/* ✅ Лучше использовать: border-box */
.box {
  box-sizing: border-box;
  width: 100px;
  padding: 10px;
  border: 2px solid;
  /* Общая ширина = ровно 100px */
  /* content = 100 - 10 - 10 - 2 - 2 = 76px */
}

Применить для всех элементов:

* {
  box-sizing: border-box;
}

html {
  box-sizing: border-box;
}

*,
*::before,
*::after {
  box-sizing: inherit;
}

Примеры расстояний

Создать отступ между элементами:

.container > * + * {
  margin-top: 20px; /* Отступ между элементами */
}

Карточка с отступом

.card {
  padding: 20px;              /* Отступ внутри */
  border: 1px solid #ddd;     /* Граница */
  border-radius: 8px;         /* Скругление */
  margin: 10px;               /* Отступ снаружи */
  background: white;
}

Кнопка с пропорциональными отступами

.btn {
  padding: 12px 24px;         /* Вертикально 12px, горизонтально 24px */
  margin: 8px 0;              /* Вертикальный отступ */
  border: none;
  border-radius: 4px;
  background: blue;
  color: white;
}

Margin Collapse (схлопывание margin)

Это сложная концепция, когда margin'ы соседних элементов объединяются:

<div class="box1" style="margin-bottom: 30px;"></div>
<div class="box2" style="margin-top: 20px;"></div>

<!-- Расстояние между ними = 30px (не 30+20=50px) -->
<!-- Браузер выбирает максимальное значение -->

Это не происходит:

• Если элемент имеет padding или border
• Если элемент имеет overflow: hidden
• Если элементы находятся в flex или grid

Вывод

Блочная модель - это основа CSS макетов:

1. Content - само содержимое
2. Padding - внутренний отступ
3. Border - граница
4. Margin - внешний отступ

Всегда помни:

• Используй box-sizing: border-box для удобства
• Margin для расстояния между элементами
• Padding для расстояния внутри элемента
• Border для визуальной границы