Box model и box-sizing
↑ 1.3 CSS и SASS · → Следующая
Зачем это на собесе
Самый базовый вопрос по CSS: из чего состоит блок и почему ширина «не совпадает».
Объяснение
Каждый элемент — прямоугольник: content → padding → border → margin.
| Свойство | Что задаёт |
|---|---|
width/height | размер content-области (при content-box) |
padding | отступ внутри, фон распространяется |
border | рамка |
margin | отступ снаружи, прозрачный |
box-sizing:
| Значение | Ширина элемента |
|---|---|
content-box (по умолчанию) | width + padding + border |
border-box | width включает padding и border |
*, *::before, *::after { box-sizing: border-box; } /* привычный сброс */
.card { width: 300px; padding: 16px; border: 1px solid #ddd; } /* итого 300px при border-box */Типы блоков: display: block (на всю строку, принимает размеры), inline (в строке, игнорирует width/height и вертикальные margin), inline-block, none, flex, grid.
Схлопывание margin: вертикальные margin соседних блоков (и родителя с первым/последним потомком) объединяются в больший. Не схлопываются в flex/grid и при overflow не visible, padding/border у родителя.
Нюансы и подводные камни
margin: autoцентрирует блок с заданной шириной по горизонтали.paddingв процентах считается от ширины родителя (даже сверху и снизу).- Отрицательные margin допустимы, но усложняют вёрстку.
inline-элементы имеют «пробел» между собой из-за пробельных символов.outlineне влияет на размеры, в отличие отborder.
Практика
- Сравните размеры блока с
content-boxиborder-boxв DevTools. - Воспроизведите схлопывание margin и устраните его.
- Сверстайте карточку с фиксированной шириной и отступами без переполнения.
Вопросы с ответами
Чем border-box отличается от content-box?
В
border-boxзаданная ширина включает padding и border.
Что такое margin collapsing?
Вертикальные внешние отступы соседних блоков объединяются в один, равный большему.