Блочная модель: размеры, отступы и рамки

Всё на странице — прямоугольники

Откройте инструменты разработчика (F12) и наведите курсор на любой элемент: браузер подсветит прямоугольник. Каждый элемент состоит из четырёх слоёв — это и есть блочная модель:

1. content — содержимое: текст, картинка;
2. padding — внутренний отступ, между содержимым и рамкой;
3. border — рамка;
4. margin — внешний отступ, расстояние до соседей.

В инструментах разработчика на вкладке Computed эта схема нарисована для каждого элемента — удобно, когда непонятно, откуда взялся лишний отступ.

Размеры и отступы

.card {
  width: 300px;
  padding: 20px;
  border: 1px solid #d5dbd0;
  margin-bottom: 16px;
  background-color: white;
}

Фон заливает содержимое и padding, но не margin: внешний отступ всегда прозрачный.

Отступы можно задавать для каждой стороны отдельно или короткой записью:

.box {
  padding: 10px;              /* со всех сторон */
  padding: 10px 20px;         /* сверху и снизу 10, слева и справа 20 */
  padding: 10px 20px 30px 40px;  /* сверху, справа, снизу, слева — по часовой стрелке */
  margin-top: 24px;           /* только сверху */
}

Запомнить порядок помогает часовая стрелка: верх, право, низ, лево.

box-sizing: border-box

По умолчанию width задаёт ширину только содержимого, а padding и рамка прибавляются сверху. Блок с width: 300px и padding: 20px на самом деле займёт 342 пикселя. Считать так неудобно, поэтому почти в каждом проекте первым делом пишут:

* {
  box-sizing: border-box;
}

Звёздочка выбирает все элементы. Теперь width: 300px — это вся ширина вместе с отступами и рамкой, а для содержимого остаётся сколько получится.

Блочные и строчные элементы

Элементы ведут себя по-разному:

Поведение меняет свойство display:

.menu a {
  display: inline-block;   /* в строку, но с размерами и отступами, как у блока */
  padding: 8px 16px;
}

Значение inline-block часто используют для кнопок-ссылок: они стоят в строку, но принимают отступы. А display: none полностью скрывает элемент.

Выравнивание блока по центру

Частая задача — колонка текста по центру страницы:

.container {
  max-width: 700px;
  margin: 0 auto;
  padding: 0 16px;
}

margin: 0 auto делит свободное место поровну слева и справа. max-width вместо width позволяет блоку сужаться на маленьких экранах. Именно так устроена колонка текста на этом сайте.

<article class="product">
  <h2>Наушники</h2>
  <p>Беспроводные, до 30 часов работы.</p>
  <p class="price">4 990 ₽</p>
</article>

* {
  box-sizing: border-box;
}

.product {
  max-width: 320px;
  padding: 20px;
  margin-bottom: 24px;
  border: 1px solid #d5dbd0;
  border-radius: 12px;
  background-color: white;
}