Блочная модель CSS (Box Model)
Каждый HTML-элемент - прямоугольник из четырёх слоёв: content → padding → border → margin.
box-sizing
По умолчанию (content-box) width задаёт только ширину контента. Padding и border добавляются сверху.
/* content-box */
.box { width: 200px; padding: 20px; border: 2px solid }
/* итоговая ширина: 200 + 40 + 4 = 244px */
/* border-box - width включает padding и border */
.box { box-sizing: border-box; width: 200px; padding: 20px; border: 2px solid }
/* итоговая ширина: ровно 200px */
Современная практика - глобальный сброс:
*, *::before, *::after { box-sizing: border-box }
margin collapsing
Вертикальные отступы смежных блоков схлопываются - берётся наибольший, а не сумма.
.a { margin-bottom: 20px }
.b { margin-top: 30px }
/* Расстояние между ними: 30px, не 50px */
Схлопывания нет при: flex/grid, overflow ≠ visible, float-элементах.