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

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

Внутренний отступ

padding — расстояние от содержимого до рамки элемента. Фон элемента закрашивает и его:

<style>
  .box {
    background: lavender;
    padding: 20px;
  }
</style>
 
<div class="box">Текст отодвинут от краёв на 20 пикселей.</div>

<div> — блок без собственного смысла, универсальный контейнер для оформления. Он часто встречается в примерах про блоки.

Рамка

border рисует рамку вокруг внутреннего отступа. В одном свойстве указывают толщину, вид линии и цвет:

<style>
  .box {
    padding: 12px;
    border: 2px solid rebeccapurple;
  }
</style>
 
<div class="box">Блок со сплошной рамкой</div>

Виды линий, скругление углов и рамки с отдельных сторон разберём в уроке про фон и рамки.

Внешний отступ

margin — расстояние до соседних элементов. Оно лежит снаружи рамки и всегда прозрачно:

<style>
  .card {
    padding: 12px;
    border: 1px solid gray;
    margin-bottom: 24px;
  }
</style>
 
<div class="card">Первая карточка</div>
<div class="card">Вторая карточка</div>

Вертикальные отступы соседних блоков не складываются, а схлопываются: если у верхнего margin-bottom: 24px, а у нижнего margin-top: 16px, между ними будет 24px — больший из двух.

Отдельные стороны

Отступ можно задать одной стороне — padding-left, margin-top — или всем сразу сокращённой записью. Значения идут по часовой стрелке, начиная сверху:

<style>
  .a { padding: 4px 32px; background: mistyrose; }
  .b { padding: 4px 8px 20px 48px; background: honeydew; }
</style>
 
<div class="a">Два значения: сверху и снизу 4, слева и справа 32</div>
<div class="b">Четыре значения: сверху, справа, снизу, слева</div>

Размеры и центрирование

width и height задают ширину и высоту. Блочный элемент без width занимает всю доступную ширину. Блок с заданной шириной ставят по центру автоматическими отступами слева и справа:

<style>
  .center {
    width: 200px;
    height: 60px;
    margin: 0 auto;
    background: lightyellow;
    text-align: center;
  }
</style>
 
<div class="center">По центру</div>

auto значит «раздели свободное место поровну».

Блочная модель в инструментах браузера

Все слои можно увидеть: щёлкните по элементу правой кнопкой мыши, выберите «Исследовать элемент» и найдите вкладку с размерами. Там нарисована схема блока с цифрами для каждого слоя — это самый быстрый способ понять, откуда взялся лишний отступ.

Частая ошибка

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

<style>
  .w { width: 200px; padding: 20px; border: 4px solid gray; margin-bottom: 8px; }
  .fixed { box-sizing: border-box; }
</style>
 
<div class="w">Шире 200px: 248px</div>
<div class="w fixed">Ровно 200px</div>

Обычно box-sizing: border-box включают сразу для всех элементов сайта правилом * { box-sizing: border-box; }.