Как увеличить или уменьшить расстояние между абзацами на веб-странице с помощью CSS

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

Изменение расстояния между абзацами

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

Вот пример таблицы стилей для HTML 4 от Консорциума W3, в которых устанавливается верхнее и нижнее поля ввода равными 1.12em. Так что разрыв между абзацами будет составлять 1.12em.

Чтобы узнать, как браузер задает данные разрывы, запустите инструменты веб-разработчика и проверьте значения, заданные для полей ввода, границ и отступов каждого абзаца.

Таким образом я обнаружил, что Firefox устанавливает поле ввода до и после каждого абзаца в значение, равное размеру используемого шрифта. При этом оставляя размер границы и отступы равными нулю. Получается, что Firefox задает для каждого абзаца следующие стили:

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

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

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

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

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

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

Для решения проблемы мой читатель использовал следующее правило CSS:

p { line-height: 2;}

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

Для каждой строки задано свойство line-height: 2. Так что последняя строка первого абзаца имеет в себя дополнительный пробел ее, а первая строка второго абзаца — дополнительное пространство над ней. Добавьте это расстояние к разрыву между абзацами, которое устанавливают браузеры, и вы получите продемонстрированный выше результат.

Но если необходимо задать между абзацами интервал, не равный расстоянию между отдельными строками, установите верхнее и нижнее поля ввода равными 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;}

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

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

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *