middle

Что такое блочная модель (Box Model)?

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

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

Структура

Пример

┌─────────────────────────────────────┐
│             margin                  │
│  ┌───────────────────────────────┐  │
│  │          border               │  │
│  │  ┌─────────────────────────┐  │  │
│  │  │       padding           │  │  │
│  │  │  ┌───────────────────┐  │  │  │
│  │  │  │     content       │  │  │  │
│  │  │  │  width x height   │  │  │  │
│  │  │  └───────────────────┘  │  │  │
│  │  └─────────────────────────┘  │  │
│  └───────────────────────────────┘  │
└─────────────────────────────────────┘

box-sizing

Значение	Что включает width/height	По умолчанию
`content-box`	Только content	Да
`border-box`	content + padding + border	Нет (нужно указать явно)

С content-box (по умолчанию): если width: 200px, padding: 20px, border: 1px, реальная ширина элемента = 200 + 202 + 12 = 242px.

С border-box: width: 200px — это итоговая ширина, включая padding и border. Содержимое займёт 200 - 202 - 12 = 158px.

Общепринятый сброс

Пример

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

Почти все современные проекты используют border-box глобально — так проще рассчитывать размеры.

На собеседовании: обязательно объяснить разницу между content-box и border-box. Частая ошибка — не упомянуть box-sizing или не знать, какое значение стоит по умолчанию.

#css #box-model #раскладка