Как настроить межстрочное расстояние CSS и отступы абзацев

Расстояние между строками CSS задает свойство line-height. Интервал между абзацами регулируют внешние отступы margin-top и margin-bottom. Настраивайте эти свойства отдельно: так вы увеличите промежутки между абзацами, сохранив межстрочный интервал внутри текста.

Как задать расстояние между абзацами в CSS

Браузерная таблица стилей задает абзацам внешние отступы по умолчанию. Стили вашего сайта могут переопределять эти значения.

Чтобы узнать текущие отступы, откройте инструменты разработчика через контекстное меню абзаца. Выберите элемент p и найдите схему его блочной модели. Она показывает внешние отступы margin, границы border и внутренние отступы padding.

Например, правило с отступами по 1em выглядит так:

p {
  margin-top: 1em;
  margin-bottom: 1em;
}

При размере шрифта абзаца 16px значение 1em соответствует 16px.

У соседних блочных абзацев в обычном потоке вертикальные отступы схлопываются. Два положительных отступа дают промежуток, равный большему из них. Подробнее этот механизм описывает документация MDN о схлопывании внешних отступов.

В приведенном выше примере оба поля имеют одинаковый размер, поэтому расстояние между абзацами составляет 1em.

Чтобы увеличить промежуток до 2em, используйте следующий код:

p {
  margin-top: 2em;
  margin-bottom: 2em;
}

Добавьте правило в CSS-файл, подключенный к вашей странице. Между соседними абзацами появится внешний отступ 2em, если другие правила его не переопределяют.

Во flex- и grid-контейнерах отступы соседних элементов не схлопываются. Если абзацы стоят вертикально в flex-контейнере с flex-direction: column или в соседних строках grid, а свойство gap не задано, два отступа по 2em дадут промежуток 4em. При горизонтальной раскладке flex-элементов это условие не выполняется.

Межстрочное расстояние CSS и интервалы между абзацами

Большой line-height увеличивает видимый промежуток между абзацами. Само свойство при этом не меняет их внешние отступы.

Рассмотрим правило, которое задает двойную высоту строки:

p {
  line-height: 2;
}

Если применить это правило к блоку с текстом, результат будет следующим:

Значение line-height: 2 задает высоту строки вдвое больше размера шрифта. Дополнительное пространство распределяется над и под текстом каждой строки.

Поэтому видимый промежуток между абзацами включает пространство крайних строк и внешние отступы. Чтобы убрать дополнительный разрыв от margin, установите верхний и нижний отступы равными 0:

p {
  line-height: 2;
  margin-top: 0;
  margin-bottom: 0;
}

Теперь строки соседних абзацев сохраняют тот же вертикальный шаг, что и строки внутри абзаца.

Для распознавания абзацев установите отступ первой строки с помощью свойства text-indent:

p {
  line-height: 2;
  margin-top: 0;
  margin-bottom: 0;
  text-indent: 22px;
}

Результат выглядит следующим образом:

Если вам не нравится полученный результат, измените значение отступа.

Чтобы вернуть прежнее оформление, удалите добавленные правила из CSS-файла. Если вы заменяли существующие значения, восстановите их из сохраненной копии.

Совет от нашей редакции: меняйте margin и line-height по очереди. Так вы увидите, какое свойство создает лишний промежуток.