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

HTML: Абзац и красная строка

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

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

Абзац





 

Примечание: по умолчанию расстояние между абзацами равно 1em (em — это единица измерения равная высоте шрифта), то есть расстояние между абзацами напрямую зависит от размера шрифта.

Для изменения отступов между абзацами, без изменения размера шрифта, можно воспользоваться CSS свойством margin.

Не забывайте про закрывающий тег

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

Абзац 
Другой абзац





 

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

Красная строка

Что такое красная строка? Согласно определению, это начальная строка абзаца, которую раньше выделяли красным цветом (откуда и пошло название). До того, как было изобретено книгопечатание, книги писали от руки – главу или часть текста, первое слово или букву писали красной краской. Так появилось понятие «писать с красной строки» — это означает начало новой мысли, главы или части.

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

Для добавления красной строки к вашим абзацам нужно воспользоваться CSS свойством text-indent, которое позволяет поставить отступ перед первым предложением:

   p   
Как и в любом настоящем искусстве, в хороших текстах нет мелочей, к которым некоторые относят и красную строку, считая, что употребление ее не так уж и важно. Однако надо понимать, что любая запятая несет в себе как эстетическую, так и смысловую нагрузку, а не только является данью правилам грамматики – это касается и форматирования.
   

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

 
Как и в любом настоящем искусстве, в хороших текстах нет мелочей, к которым некоторые относят и красную строку, считая, что употребление ее не так уж и важно. Однако надо понимать, что любая запятая несет в себе как эстетическую, так и смысловую нагрузку, а не только является данью правилам грамматики – это касается и форматирования.
 

Примечание: не обязательно устанавливать отступ размером в 25px, вы можете выбрать оптимальный размер отступа сами, также с помощью свойства text-indent возможно сделать выступающую над остальным текстом строку, для этого нужно задать отрицательное значение для свойства ( например: -30px).

С этой темой смотрят:

• HTML заголовки, линии и комментарии
• HTML перенос строки
• HTML теги для текста
• Выравнивание текста
• Как изменить шрифт
• Стиль и размер шрифта

Копирование материалов с данного сайта возможно только с разрешения администрации сайта
и при указании прямой активной ссылки на источник.
2011 – 2023 © puzzleweb.ru | razumnikum.ru

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

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

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

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

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

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

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

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

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

Междустрочный интервал определяет расстояние от одной базовой линии текста (линии, на которой находится строка текста) до другой.

Главный элемент управления междустрочными интервалами находится на панели «Абзац» и контекстной панели инструментов. Рекомендуется использовать этот элемент, поскольку его можно применить к целому абзацу и таким образом обеспечить его единообразие. Параметр «Частота междустрочного интервала» можно использовать при наличии некоторого числа символов, с которыми нужно работать особым образом (например, символов, к которым применен нестандартный шрифт, размер которого на вид отличается от размеров других используемых в документе шрифтов).

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

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

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

• Выполните одно из перечисленных далее действий.
  • На контекстной панели инструментов выберите или введите значение параметра Междустрочный интервал абзаца .
  • На панели Абзац выберите или введите значение параметра Междустрочный интервал абзаца в разделе Интервал .

Параметр Частота междустрочного интервала можно использовать при наличии некоторого числа символов, с которыми нужно работать особым образом (например, символов, к которым применены нестандартные шрифты, размеры которых на вид отличаются от размеров других используемых в документе шрифтов).

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

• На панели Абзац измените параметры Интервал перед абзацем и Интервал после абзаца в разделе Интервал . Кроме того, вы можете установить флажки Объединять пробелы перед и после и Игнорировать пробелы для одинаковых стилей , если интервалам в тексте нужно придать соответствующий вид.

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

ТАКЖЕ СМ.:

• Панель «Абзац»
• Форматирование абзацев

Как задать расстояние между пунктами списка?

Второй способ следующий — для селектора li добавляем свойство line-height, значение в виде дробного числа подбираем самостоятельно. В примере 2 используется значение 1.8.

Пример 2. Использование line-height

• создание пунктуальности (никогда не будете никуда опаздывать);
• излечение от пунктуальности (никогда никуда не будете торопиться);
• изменение восприятия времени и часов.

Этот способ менее универсален, поскольку line-height воздействует на все строки. Вид списка зависит от переносов строк; если переносов нет, то мы получим результат, показанный на рис. 2. Если в тексте имеются переносы, то получим результат как на рис. 3.

Рис. 2. Межстрочное расстояние

Рис. 3. Межстрочное расстояние при переносе строк

См. также

• line-height
• line-height в CSS
• margin-bottom
• Атрибут bottommargin