Коротко: «модель CSS» — это блочная модель (box model). Она объясняет, из чего складывается размер блока: контент, внутренние отступы, рамка и внешние поля. Понять её — перестать удивляться, почему блок «шире, чем задано».
Из чего состоит блок
Схема от центра наружу:
- content — содержимое (текст, картинка).
- padding — внутренний отступ (фон закрашивается).
- border — рамка.
- margin — внешний отступ (фон не закрашивается).
| Часть | Что делает | Влияет на соседей |
|---|---|---|
| padding | отступ внутри | нет |
| border | рамка | да (увеличивает размер) |
| margin | отступ снаружи | да (схлопывается по вертикали) |
Вкладки: ключевые понятия
*, *::before, *::after { box-sizing: border-box; }С border-box ширина включает padding и border — блоки не «расползаются».
.a { margin-bottom: 30px; }
.b { margin-top: 20px; } /* между ними будет 30px, а не 50px */Вертикальные внешние отступы соседних блоков «схлопываются»: остаётся больший. У padding такого нет.
В Chrome DevTools выберите элемент → вкладка Computed: там схема блочной модели с числами (content/padding/border/margin). Очень помогает при отладке.
Практика: три задачи
1. Блок «шире, чем задано»
.box { width: 200px; padding: 20px; border: 2px solid #ccc; box-sizing: border-box; }
/* ширина остаётся 200px */2. Расстояние между карточками
.card { margin-bottom: 16px; } /* внешний отступ */
.card__body { padding: 20px; } /* внутренний отступ */3. Аккуратная «шапка» секции
.section { padding: 40px 24px; }
.section + .section { margin-top: 32px; }box-sizing: border-box глобально. Это экономит часы отладки размеров.Частые ошибки: причина → решение
| Симптом | Причина | Решение |
|---|---|---|
| Блок шире заданного | padding/border добавляются | box-sizing: border-box |
| Слишком большой зазор между блоками | двойные margin | оставить один или использовать gap |
| Отступ «не там» | padding вместо margin | выбрать правильный инструмент |
| Размеры «плывут» | не задан box-sizing |
включить глобально |
Проверьте себя
box-sizing: border-box?
Вопросы и ответы
К ширине добавляются padding и border. Включите box-sizing: border-box.
Вертикальные внешние отступы соседних блоков объединяются в больший. У padding такого нет.
DevTools → Computed: увидите content, padding, border и margin числами.
Для адаптивных контейнеров — max-width: блок сжимается на узких экранах.
Итоги
- Блочная модель = content + padding + border + margin.
box-sizing: border-boxупрощает расчёты.- Схлопывание margin — нормальное поведение, помните о нём.
- Проверяйте Computed в DevTools.
Комментарии
Пока комментариев нет — будьте первым, кто поделится мнением.