Урок 2 · CSS · 20 минут

Отступы и размеры: дай блокам место

Большинство «съехавших» макетов связано не со сложной вёрсткой, а с отступами. Разберёмся, чем отличаются пространство внутри элемента и расстояние между соседями.

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

Браузер представляет каждый элемент как прямоугольник. Внутри находится содержимое, затем внутренний отступ padding, рамка border и внешний отступ margin. Это и есть блочная модель.

.card {
  padding: 24px;
  border: 1px solid #dbe3f2;
  margin-bottom: 16px;
}

Здесь текст отступит от границы карточки на 24 пикселя. Следующая карточка окажется ниже на 16 пикселей.

Padding — воздух внутри

padding используют, когда нужно увеличить кликабельную область кнопки, отодвинуть текст от края карточки или создать комфортный внутренний ритм. Он становится частью фона элемента.

.button {
  padding: 12px 18px;
  background: #2872df;
  color: white;
}

Два значения читаются так: первое — сверху и снизу, второе — слева и справа. Можно задать четыре стороны: padding: 8px 12px 16px 12px.

Margin — расстояние снаружи

margin создаёт пространство вокруг элемента. Его удобно использовать для вертикального расстояния между заголовком и абзацем, карточками и отдельными секциями. Фон элемента в это пространство не попадает.

h2 {
  margin: 0 0 12px;
}

p {
  margin: 0 0 20px;
}

Почему полезен box-sizing

По умолчанию width задаёт только ширину содержимого. Padding и рамка добавляются сверху, и блок может стать шире ожидаемого. Правило border-box включает их в указанную ширину.

* {
  box-sizing: border-box;
}

.field {
  width: 100%;
  padding: 12px;
  border: 1px solid #aab7cc;
}

Частые ошибки

• Добавлять огромный margin-left, чтобы сдвинуть элемент. Для раскладки лучше Flexbox или Grid.
• Забывать, что у заголовков и абзацев есть браузерные отступы по умолчанию.
• Путать padding и margin: фон подскажет разницу.
• Задавать фиксированную ширину на маленьком экране и получать горизонтальную прокрутку.

Из чего складывается ширина блока

По умолчанию width задаёт только содержимое. Padding и рамка добавляются сверху и делают блок шире, чем ты написал. Из-за этого три карточки по 33% не помещаются в ряд. box-sizing: border-box включает padding и рамку в указанную ширину. Его почти всегда ставят на все элементы в начале файла.

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

.card {
  width: min(100%, 36rem);
  padding: 1.25rem;
  border: 1px solid #ddd6c8;
  margin-inline: auto;
}

Вертикальные внешние отступы соседних абзацев схлопываются: из 24 и 16 пикселей получится 24, а не 40. Горизонтальные отступы не схлопываются. Если расстояние внезапно меньше ожидания, сначала проверь именно соседние margin.

Где ставить расстояние

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

Не лечи кривую сетку отрицательными отступами. Сначала пойми, кто из родителей даёт лишние 16 пикселей. Отрицательный margin прячет причину и потом ломает соседний блок.

Практичная шкала вместо случайных чисел

• Возьми шаг 4 или 8 пикселей: 8, 16, 24, 32, 48.
• Внутри кнопки отступ меньше, чем внутри большой карточки.
• У заголовка снизу отступ меньше, чем у абзаца, чтобы он остался привязан к своему тексту.
• Последнему элементу в карточке часто не нужен нижний margin: его уже даёт padding карточки.

.card {
  box-sizing: border-box;
  max-width: 420px;
  padding: 24px;
  margin-bottom: 20px;
  border: 1px solid #dbe3f2;
  border-radius: 12px;
}