Блочная модель

Задай блоку width: 200px, внутренний отступ 16px и рамку 2px, и по умолчанию он займёт на экране 236 пикселей в ширину, а не 200.

Каждый элемент является блоком

Чтобы разметить страницу, браузер превращает каждый элемент в прямоугольник. У каждого блока четыре слоя, изнутри наружу. Область содержимого содержит текст или изображение. Внутренний отступ (padding) является пространством внутри блока между содержимым и рамкой, и у него цвет фона блока. Рамка (border) является линией вокруг внутреннего отступа. Внешний отступ (margin) является пространством снаружи рамки, которое отталкивает другие блоки; он всегда прозрачный. Инструменты разработчика в браузере рисуют именно такую схему, когда ты изучаешь элемент, и подставляют числа.

Сокращённая запись для четырёх сторон

padding, margin и border-width принимают от одного до четырёх значений, по часовой стрелке начиная сверху. padding: 16px задаёт все четыре стороны. padding: 8px 16px задаёт сверху и снизу 8, а слева и справа 16. padding: 4px 8px 12px 16px задаёт верх, правую сторону, низ и левую сторону именно в таком порядке. Каждую сторону можно задать и отдельно, как в margin-top. border: 2px solid #333 задаёт ширину, стиль и цвет сразу; без стиля, например solid или dashed, рамка вообще не рисуется.

box-sizing: настройка, которую меняют почти все

По умолчанию width и height задают размер только области содержимого, а внутренний отступ и рамка добавляются сверху. Это модель content-box, и с ней неудобно верстать: два блока width: 50% с любым внутренним отступом уже не помещаются рядом. С box-sizing: border-box ширина включает внутренний отступ и рамку, а область содержимого сжимается, чтобы освободить место. Многие таблицы стилей начинаются с того, что применяют это ко всем элементам: *, *::before, *::after { box-sizing: border-box; }.

Блочные и строчные блоки

Блоки ведут себя по-разному в зависимости от значения display. Блочные элементы, например p, h1 и section, начинаются с новой строки и растягиваются на всю ширину контейнера. Строчные элементы, например a, strong и span, стоят внутри строки текста; width и height к ним не применяются, а их вертикальные внутренние и внешние отступы не отодвигают другие строки. display: inline-block находится посередине: блок идёт внутри строки как слово, но учитывает ширину, высоту и внутренний отступ, это подходит для маленьких меток и кнопок.

Схлопывающиеся отступы

Одно правило удивляет почти всех. Когда нижний внешний отступ одного блока встречается с верхним внешним отступом следующего, они не складываются: побеждает больший. Абзац с margin-bottom: 20px, за которым идёт заголовок с margin-top: 30px, окажется на расстоянии 30 пикселей, а не 50. Это называется схлопыванием внешних отступов, и оно бывает только у вертикальных отступов между блоками в обычном потоке, но не внутри flex- или grid-контейнеров. Чтобы выровнять блок по центру по горизонтали, задай ему width или max-width и margin: 0 auto: два автоматических боковых отступа поровну делят свободное место.