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

Браузер не видит на странице заголовков и картинок — он видит прямоугольники. Чтобы разместить их, ему нужно знать, сколько места занимает каждый, и блочная модель отвечает на этот вопрос. Изнутри наружу: область содержимого, затем внутренний отступ (padding), затем рамка (border), затем внешний отступ (margin). Фон закрашивает содержимое, padding и область под рамкой, а margin всегда прозрачен.

Эту схему удобно увидеть вживую: в инструментах разработчика любого браузера на вкладке стилей есть диаграмма из вложенных прямоугольников с размерами каждого слоя выбранного элемента.

Как считается ширина

По умолчанию действует box-sizing: content-box: свойство width задаёт только ширину содержимого, а отступы и рамка прибавляются сверху.

.box {
  width: 300px;
  padding: 20px;
  border: 1px solid #ccc;
}
/* content-box: 300 + 20 + 20 + 1 + 1 = 342px на экране
   border-box:  ровно 300px, на содержимое остаётся 258px */

Именно поэтому блоки «не влезают» в колонку: дизайнер задал 300 пикселей, верстальщик написал width: 300px, а на экране получилось 342.

Сброс, который ставят почти везде

*, *::before, *::after { box-sizing: border-box; }

При border-box ширина включает padding и рамку, и размеры из макета переносятся напрямую. Эта строка есть в большинстве современных CSS-сбросов и фреймворков.

Нюансы, о которые спотыкаются

• Схлопывание отступов. Вертикальные margin соседних блоков в обычном потоке не складываются, а сливаются: из 20 и 30 пикселей получается 30.
• Строчные элементы. У span или a вертикальные padding и margin не раздвигают строку: фон растягивается, но соседние строки остаются на месте. Нужен inline-block или block.
• Процентные отступы. Проценты в padding и margin — даже вертикальных — считаются от ширины содержащего блока, а не от высоты.

Внешняя граница модели, включающая margin, разобрана отдельно в статье про бокс внешнего отступа.