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

Внутренний отступ раздвигает содержимое и рамку, а внешний — элемент и окружающий мир. Фон элемента на margin не распространяется: это всегда пустое пространство, сквозь которое виден родитель. Место, которое элемент занимает вместе с отступами, называется боксом внешнего отступа.

Запись и полезные значения

.note  { margin: 10px 20px 30px 40px; } /* верх, право, низ, лево */
.badge { margin: 10px 20px; }           /* верх-низ, право-лево */
.container {
  max-width: 1140px;
  margin-inline: auto;         /* центрирование по горизонтали */
}
.stack > * + * { margin-block-start: 1.5em; }

Значение auto по бокам делит свободное место поровну и ставит блок с заданной шириной в центр. Логические свойства margin-inline и margin-block привязаны к направлению письма, а не к сторонам экрана: на сайте с арабским или ивритом отступы развернутся автоматически. Последнее правило ставит отступ между соседями внутри обёртки, но не над первым элементом.

Схлопывание отступов

Главная особенность margin, которая сбивает с толку. В обычном блочном потоке вертикальные отступы соседних элементов не складываются, а сливаются в один, равный большему. Заголовок с нижним отступом 20 пикселей и абзац с верхним 30 будут разделены 30 пикселями, а не 50. Ещё неожиданнее: верхний margin первого ребёнка может «вытечь» наружу родителя, если у того нет рамки, внутреннего отступа или собственного контекста форматирования. Горизонтальные отступы не схлопываются никогда, как и любые отступы у элементов внутри flex- и grid-контейнеров.

margin или gap

Для расстояний между карточками в сетке или пунктами меню удобнее свойство gap у flex- или grid-контейнера. Оно задаёт промежутки только между элементами, без лишнего отступа у краёв, и не схлопывается. Внешние отступы остаются полезны для отступов текстовых блоков, центрирования и выталкивания элемента: margin-left: auto в флекс-контейнере прижимает элемент вправо, например кнопку входа в шапке. Отрицательные значения тоже допустимы — ими, например, «вытягивают» картинку за пределы колонки текста, но злоупотреблять этим не стоит: элементы начинают перекрываться.