Как сделать отступ между абзацами в css
Перейти к содержимому

Как сделать отступ между абзацами в css

  • автор:

Межстрочный интервал в CSS

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

При использовании свойства line-height вас может ожидать некоторый подвох: это свойство не задает промежуток между строками текста, как могло бы показаться, а задает высоту линии текста.

Это значит, что реальный видимый промежуток между строками будет вычисляться так: line-height — font-size = видимое расстояние между строками текста.

В следующем примере расстояние между строками текста будет 50px — 20px = 30px :

Пусть размер шрифта для абзацев равен 30px . Установите свойство line-height так, чтобы видимый белый промежуток между абзацами был равен 15px .

Каскадные таблицы стилей CSS советы & приёмы

Вот простой приём: выделение отступом первой строки каждого абзаца. Многим людям проще читать текст, когда его абзацы выделены отступом, а не разделены между собой пустыми строками. Это особенно заметно с большими текстами, но также позволяет зарезервировать пустые строки для более важных разрывов текста.

Трюк здесь состоит в том, чтобы выделять отступом только чётные абзацы. Первый абзац страницы необязательно выделять отступом, как, например, и абзац, следующий за диаграммой, заголовком или чем-то, что уже само по себе является отступом от текста. А правила очень просты:

p < margin-bottom: 0 >p + p

Здесь мы выделяем отступом первую строку только того абзаца, который следует за другим абзацем. С помощью этих правил мы также убираем пустую строку под всеми абзацами и над абзацами с отступом. На практике вы обнаружите, что вам всё же нужны исключения.

На этой странице, например, есть элементы P, которые используются в качестве подписи к изображениям (см. пример “Иллюстрации & подписи”). Мы уже выровняли их по центру, поэтому выделять дополнительно отступом не надо. Простое правило ‘ p.caption ‘ позаботится об этом. Вы можете видеть, что мы действительно использовали это правило в нашем примере.

Теперь мы можем использовать произвольное число пробелов между абзацами для обозначения важных разрывов в тексте. Давайте определим три разных класса: stb (малый тематический разрыв), mtb (средний тематический разрыв) и ltb (большой тематический разрыв). Мы присвоили данному абзацу класс stb , чтобы вы могли увидеть эффект.

p.stb < text-indent: 0; margin-top: 0.83em >p.mtb < text-indent: 0; margin-top: 2.17em >p.ltb

Навигация по сайту

Bert Bos, style activity lead
Copyright © 1994–2021 W3C ® Privacy policy

Created 17 January 2001;
Last updated Ср 06 янв 2021 05:40:49

Как задать интервал между абзацами?

Author24 — интернет-сервис помощи студентам

Как задать меньший интервал между строк (HTML)
Как задать меньший интервал между строк в правой колонке? Не могу разобраться. Во вложении скриншот.

13208 / 6596 / 1041
Регистрация: 10.01.2008
Сообщений: 15,069

1 2 3
p { margin-bottom: 1em; }

4226 / 1795 / 211
Регистрация: 24.11.2009
Сообщений: 27,562
Почему то между и не помогает. Ставлю по два пиксела, а всё равно огромный.
13208 / 6596 / 1041
Регистрация: 10.01.2008
Сообщений: 15,069

ЦитатаСообщение от taras atavin Посмотреть сообщение

Почему то между и не помогает. Ставлю по два пиксела, а всё равно огромный.
Может, у них еще есть свой padding по умолчанию не нулевой?
4226 / 1795 / 211
Регистрация: 24.11.2009
Сообщений: 27,562

Пробовал и padding, интервал и на него не реагирует.

Добавлено через 3 минуты
Одновременное применение обоих параметров решило проблему:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16
="text/css"> H1 {font-size:36px; display: block; padding: 4px; margin-bottom: 4px; margin-top: 4px;} H2 {font-size:34px; display: block; padding: 4px; margin-bottom: 4px; margin-top: 4px;} H3 {font-size:32px; display: block; padding: 4px; margin-bottom: 4px; margin-top: 4px;} H4 {font-size:30px; display: block; padding: 4px; margin-bottom: 4px; margin-top: 4px;} H5 {font-size:28px; display: block; padding: 4px; margin-bottom: 4px; margin-top: 4px;} H6 {font-size:26px; display: block; padding: 4px; margin-bottom: 4px; margin-top: 4px;} H7 {font-size:24px; display: block; padding: 4px; margin-bottom: 4px; margin-top: 4px;} H8 {font-size:22px; display: block; padding: 4px; margin-bottom: 4px; margin-top: 4px;} H9 {font-size:20px; display: block; padding: 4px; margin-bottom: 4px; margin-top: 4px;} H10 {font-size:18px; display: block; padding: 4px; margin-bottom: 4px; margin-top: 4px;} H11 {font-size:16px; display: block; padding: 4px; margin-bottom: 4px; margin-top: 4px;} H12 {font-size:14px; display: block; padding: 4px; margin-bottom: 4px; margin-top: 4px;} P {text-indent: 20px; display: block; padding: 2px; margin-bottom: 2px; margin-top: 2px;} {font-size:10;} >

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

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

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

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

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

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

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

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

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

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

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

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