Блочная модель — это договорённость о форме
Весь HTML — это коробки.
Не «контейнеры», не «блочные элементы», а именно коробки.
CSS описывает, как эти коробки устроены физически на странице — в трёхмерном смысле: высота, ширина, толщина стенок, внутреннее пространство.
Эту договорённость называют блочной моделью (CSS box model).
Она стандартизирована в спецификации CSS и действует одинаково во всех современных браузерах.
📌 Представьте посылку.
— Внутри — ваш товар (content).
— Вокруг — воздушно-пузырьковая плёнка (padding).
— Поверх — картонная коробка (border).
— И снаружи — свободное место до соседней посылки (margin).Это и есть box model.
Только в CSS margin не входит в размеры коробки — он как проход между стеллажами на складе.
Что такое width? Зависит от box-sizing
Вот здесь начинается боль 90% фронтендеров.
Свойство width не всегда задаёт ширину контента.
Оно задаёт ширину целевой геометрической зоны, и что именно означает эта зона — зависит от box-sizing.
Есть два режима:
a) box-sizing: content-box (по умолчанию)
width = ширина content
→ padding и border добавляются снаружи.
Пример:
Фактическая ширина блока на странице:
300px (content) + 40px (padding слева+справа) + 10px (border слева+справа) = 350px.
Почему так? Исторические причины (IE 5 делал иначе, в CSS2 решили унифицировать по стандарту W3C, но оставили возможность переключиться).
b) box-sizing: border-box
width = ширина от края border до края border
→ padding и border включены в width.
→ content автоматически сжимается.
Тот же пример:
Фактическая ширина блока: ровно 300px.
Ширина контента: 300px − 40px − 10px = 250px.
🔥 Вывод практика:
border-box — единственный разумный выбор в production.
Поэтому 99% проектов начинаются с:
*, *::before, *::after {
box-sizing: border-box;
}
Почему margin никогда не входит в width
Потому что margin — это межкоробочное пространство, а не часть самой коробки.
— margin может быть отрицательным (например, для наложения элементов).
— margin схлопывается (margin collapsing у блочных элементов).
— width и height регулируют размер элемента, а margin — его позиционирование относительно других.
📌Уточнение
Если content + padding + border — это сама посылка,
то margin — это расстояние от её стенки до стенки соседней посылки на полке.
Измерять «ширину посылки» с учётом этого расстояния — всё равно что сказать:
«Эта коробка — 30 см, но с учётом прохода до соседа — 50 см».
Нелепо. Проход — не часть коробки.
Как проверить box model в DevTools
- Откройте DevTools (F12 или Ctrl+Shift+I).
- Выберите элемент (стрелка в левом верхнем углу инструментов).
- Во вкладке Elements → внизу — панель Box Model.
- Там 4 слоя, как на схеме: margin (самый внешний), border, padding, content.
- Цифры — актуальные вычисленные значения (computed).
Совет: кликните на число — перейдёте к CSS-правилу, которое его задаёт.
Итог — 3 ключевых факта
Если вы помните это — вы опережаете 70% стажёров и половину мидлов.