Как сделать отступы в CSS

Справочник · HTML и CSS · 2 минуты чтения

Отступов в CSS три вида — выберите по задаче:

Задача	Свойство
отодвинуть блок от соседей	`margin` (внешний отступ)
отодвинуть текст от края блока, рамки, фона	`padding` (внутренний отступ)
промежутки между элементами во Flexbox и Grid	`gap`

CSS

.card {
  padding: 16px;
  margin-bottom: 24px;
}

.cards {
  display: flex;
  gap: 20px;
}

По сторонам

Каждой стороне — своё свойство: margin-top, margin-right, margin-bottom, margin-left (так же у padding). Или одной строкой:

CSS

.a { margin: 10px; }
.b { margin: 10px 20px; }
.c { margin: 10px 20px 30px; }
.d { margin: 10px 20px 30px 40px; }

одно значение — со всех сторон;
два — сверху и снизу, затем слева и справа;
три — сверху, по бокам, снизу;
четыре — сверху, справа, снизу, слева (по часовой стрелке).

margin: 0 auto — сверху и снизу 0, а слева и справа поровну: так блок с шириной встаёт по центру.

Частые задачи

Убрать отступы у страницы и списков — браузер ставит их сам:

CSS

body {
  margin: 0;
}

ul {
  margin: 0;
  padding: 0;
}

Расстояние между абзацами — margin у <p>:

CSS

p {
  margin: 0 0 1em;
}

1em — высота шрифта абзаца: расстояние растёт вместе с размером текста.

Красная строка — отступ первой строки абзаца, text-indent:

CSS

p {
  text-indent: 1.5em;
}

Отступы между элементами без лишнего в конце — gap у флекс- или грид-контейнера. С margin-right у каждого элемента последний тоже получит отступ, и ряд съедет; gap ставит промежутки только между элементами.

Отступ «не работает»

Между блоками расстояние меньше суммы отступов — вертикальные margin соседних блоков схлопываются: от 20 и 30 пикселей остаются 30. Подробно — в уроке Блочная модель.
margin-top первого элемента сдвинул весь родительский блок — отступ «вылез» наружу. Замените его на padding-top у родителя.
У ссылки или <span> не работает отступ сверху и снизу — это строчные элементы. Дайте им display: inline-block или display: block.
Блок с padding стал шире, чем задано — включите box-sizing: border-box, тогда padding входит в width.
Отступ задан, но его перебивает другое правило — проверьте элемент в инструментах разработчика (F12): там и схема отступов блока, и зачёркнутые перебитые объявления.

Отступы удобно задавать в rem (от размера шрифта страницы) — тогда при увеличении шрифта в браузере они растут вместе с текстом. Отрицательный margin тоже допустим: он сдвигает блок в обратную сторону, но пользуйтесь им аккуратно — блоки начнут налезать друг на друга.