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

Leave a Comment / Css / By /

Как увеличить или уменьшить интервал между абзацами на веб-странице с помощью 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

Для решения проблемы мой читатель использовал следующее правило 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;
}

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

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

Вадим Дворниковавтор-переводчик статьи «How do I Increase/Decrease the Space Between Paragraphs on a Web Page (CSS)»

drupal — Отступы между абзацами

Вопрос задан

9 лет 7 месяцев назад

Изменён 1 год 4 месяца назад

Просмотрен 4k раз

Пишу содержимое на drupale. Вставляю вручную картинки. Почему то после картинок появляется тег <br>, который занимает место и добавляет отступ, этот тег виден если проинспектировать страницу, а в содержимом его нету. Подскажите, пожалуйста, как убрать этот глюк и как задать вручную на html’e отступы между абзацами?

  • drupal
  • html
  • css

Получилось!

Если посмотреть в код страницы, то можно заметить, что на разных сайтах код абзаца установлен по умолчанию разный. Так, у меня это не p, а br. То есть предлагаемый выше код p {margin-bottom: 10px;}

неверен!

Необходимо прописать br {margin-bottom: 10px;}, причем на разных сайтах у меня значение «прокатывало» разное. То удалось прописать margin-top: 5px; margin-bottom: 5px;, то только margin: 10px;.

Также имело значение, в каком именно файле присутствует этот самый код, даже если кажется, что нашелся единственно верный вариант. Если не работает, то надо искать другие варианты. Теперь во всех статьях имеются удобные для чтения отступы между абзацами — http://ob-eco.ru/5-oficialnye-stranicy-petra-poroshenko-v-populyarnyh-socialnyh-setyah.html

p {
  text-indent: 1.2em;
}

Следует учитывать, на разные экраны человек смотрит с различного расстояния, и 1 сантиметр на мониторе компьютера и на смартфоне воспринимается по-разному. Например, когда установленный шрифт 2in, то 1em означает 2in. Также допустимо указывать процент, когда величина отступа рассчитывается в % от ширины блока текста.

Все нюансы описаны здесь

p {margin-bottom: 10px;}

4

Зарегистрируйтесь или войдите

Регистрация через Google

Регистрация через Facebook

Регистрация через почту

Отправить без регистрации

Почта

Необходима, но никому не показывается

Отправить без регистрации

Почта

Необходима, но никому не показывается

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими пользовательским соглашением, политикой конфиденциальности и политикой о куки

css — Изменение интервала между абзацами и внутри абзацев

спросил

Изменено 5 месяцев назад

Просмотрено 114 тысяч раз

Я нашел похожую тему, но не могу найти конкретный CSS для изменения в WordPress. Если вы зайдете на мою домашнюю страницу. Или блог.

Я хочу изменить интервал внутри и между абзацами

и не уверен, какой элемент мне нужно изменить в моем CSS.

Я нашел свойство line-height для .body , но, похоже, это не то, что я хочу.

  • css
  • пробел
  • абзац

2

Между абзацами вы должны установить отступ для этого элемента. Между строками внутри абзаца можно использовать высота строки . Например:

 р {
  высота строки: 32px; /* внутри абзаца */
  нижняя граница: 30px; /* между абзацами */
  }

1

Добавление поля margin-bottom: 30px делает свое дело, но вы также более или менее привязаны к отступу следующего элемента под вашим последним абзацем, чтобы также начать с интервала 30px. Интервал между абзацами, скорее всего, будет соответствовать высоте строки самого абзаца (или быть близким), что может отличаться от интервала между элементами следующего типа.

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

 р {
    высота строки: 32px;
    &: не (: последний ребенок) {
        нижняя граница: 30px;
    }
}
// или пробел сверху с родственным селектором:
п {
    высота строки: 30 пикселей;
    + п {
        поле сверху: 32px;
    }
}
////
// или если высота строки и интервал между абзацами совпадают:
////
$p-line-height: 30px;
п {
    высота строки: $p-высота строки;
    &: не (: последний ребенок) {
        нижняя граница: $p-line-height;
    }
}
// с пробелом сверху:
п {
    высота строки: $p-высота строки;
    + п {
        верхняя граница: $p-line-height;
    }
}

1

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

 р {
  высота строки: 15 пикселей;
  поле: 15px 0;
}

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

Зарегистрируйтесь или войдите в систему

Зарегистрируйтесь с помощью Google

Зарегистрироваться через Facebook

Зарегистрируйтесь, используя электронную почту и пароль

Опубликовать как гость

Электронная почта

Требуется, но никогда не отображается

Опубликовать как гость

Электронная почта

Требуется, но не отображается

html — Как уменьшить расстояние между тегами?

спросил

Изменено 10 месяцев назад

Просмотрено 235 тысяч раз

У меня есть страница, которую я конвертирую в PDF.

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

, это помогло бы разместить больше. Это возможно? Спасибо.

  • HTML
  • CSS

8

использовать css:

 р {поле:0}

Попробуйте этот замечательный плагин http://www.getfirebug.com 🙂

РЕДАКТИРОВАТЬ : Firebug закрыт как проект, он был перенесен на https://www.mozilla.org/en-US/firefox /разработчик

3

Как показано выше, проблема — это поле, предшествующее тегу

во время рендеринга. Не слишком элегантное, но эффективное решение — уменьшить верхнее поле.

 p { margin-top: -20px; }

Свойство CSS margin можно использовать для воздействия на все абзацы:

 p {
  поле: XXXem;
}

Замените XXX на желаемое значение; для отсутствия пробела:

 p {
  поле: 0em;
}

Я обнаружил, что это работает, чтобы дать больше абзацев в книжном стиле:

 p. firstpar {
  поле сверху: 0;
  отступ текста: 2em;
  отступ: 0 5px 0 5px;
}
p.nextpar {
  поле сверху: -1em;
  отступ текста: 2em;
  отступ: 0 5px 0 5px;
}

с использованием единицы измерения em («M»), а не единицы px , это делает стиль независимым от размера шрифта. Заполнение идет в таком порядке: сверху, справа, снизу, слева.

, чтобы повлиять на все  тегов 
 ). Я понимаю, что Мауро говорит это, но если кто-то придет сюда за помощью, я ожидаю, что они захотят увидеть пример. 
 





            1
     
 
 Установка для полей margin-bottom и margin-top значения 0em приведет к удалению пробела между абзацами: 
 
 <тип стиля = "текст/CSS">
p {поле внизу: 0em; верхняя граница: 0em;}

 
 Я следил за этим сообщением, чтобы добавить стиль строки к ', из которого мне нужно было удалить пробел.

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

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