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

Question

Accepted Answer

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

```text
┌─────────────── margin ───────────────┐  ← space OUTSIDE, between elements
│  ┌──────────── border ────────────┐  │
│  │  ┌───────── padding ────────┐  │  │  ← space INSIDE, around content
│  │  │       content            │  │  │  ← text/image (width × height)
│  │  └──────────────────────────┘  │  │
│  └─────────────────────────────────┘  │
└────────────────────────────────────────┘
```

```css
.box {
  width: 200px;      /* content width (in the default box model) */
  padding: 20px;     /* inner spacing — pushes content inward */
  border: 5px solid; /* the visible edge */
  margin: 10px;      /* outer spacing — separates from neighbors */
}
```

## Классический подвох: общая ширина

При **стандартном** `box-sizing: content-box` отрендеренная ширина *больше* того `width`, который вы установили, потому что padding и border добавляются сверху:

```text
Total width = 200 (content) + 2×20 (padding) + 2×5 (border) = 250px
```

Это удивляет новичков — вы устанавливаете `width: 200px`, но элемент занимает 250px. Исправление, которое используют все:

```css
* { box-sizing: border-box; } /* now width INCLUDES padding + border → 200px total */
```

## padding против margin

- **padding** — пространство *внутри* границы; часть элемента (кликабельно, получает цвет фона).
- **margin** — пространство *снаружи* границы; прозрачно, и соседние вертикальные отступы **схлопываются** (больший из двух соприкасающихся отступов побеждает).

## Почему это важно

Блочная модель определяет фактический размер элементов и расстояния между ними.

Знание того, что стандартная модель добавляет padding/border к `width` (и почему `border-box` является почти универсальным решением), предотвращает наиболее распространённую путаницу при определении размеров макета.