How to indent text, paragraphs, lists & more in css

Управляем пространством между словами и буквами

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

В CSS есть свойства и для управления расстоянием между словами и буквами соответственно.

Свойство

Это свойство может принимать следующие значения:

• (задание непосредственно числового значения в абсолютных единицах)
• (задание значения в процентах)

выводит заданное по умолчанию расстояние между буквами. Это расстояние зависит от используемого шрифта и браузера.

Числовое значение добавляет указанный промежуток к дефолтному ( вычитает, если задано отрицательное значение):

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

Свойство

Свойство принимает два вида значений: или числовое значение с единицами измерения.

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

Числовое значение задается в единицах исчисления, например в или в пикселях, вы можете увеличить расстояние дефолтное расстояние или уменьшить задав отрицательное значение.

Дополнение

применимо не только к словам — его можно использовать с любым строчным или строчно-блочным содержимым.

Также вы можете анимировать и . Однако в CSS-переходах значение в не работает в Firefox (39), просто замените значение на .

Вот , использующей и :

Отступ текста в HTML при помощи margin

Когда вы размещаете текст на сайте он находится в каком-то теге. Это может быть тег блока <div>, тег таблицы <table>, абзаца <p>, секции <section> и так далее.

Мы можем задать отступ для тега в котором находится текст при помощи CSS свойства margin.

Делается это так:

PHP

<div style=”margin-left:20px;”> Текст блока HTML </div>

1	<div style=”margin-left20px;”>ТекстблокаHTML<div>

Здесь мы воспользовались атрибутом style и в нём указали нужное CSS свойство, задав тексту отступ слева 20px. Так же мы можем задать для нашего блока или другого тега класс и потом в отдельном CSS файле дописать для него стили.

HTML:

PHP

<div class=»text-block»> Текст блока </div>

1	<div class=»text-block»>Текстблока<div>

CSS:

PHP

.text-block {
margin-left:20px;
}

1 2 3

.text-block{ margin-left20px; }

Если вы не создаёте страницу с нуля, а редактируете уже существующую, то можно не задавать новый класс, а определить уже имеющийся класс или идентификатор. Как это сделать показано в этой статье:«Как определить ID и класс элемента на странице?»

При помощи этого свойства мы можем задать разные отступы тексту в HTML:

• margin-left — расстояние слева
• margin-right — расстояние справа
• margin-top — расстояние сверху
• margin-bottom — расстояние снизу

Так же можно одновременно в одной строке задать одинаковые или разные отступы со всех сторон:

• margin: 10px; — делаем отступ текста 10px со всех сторон
• margin: 15px 30px; — задаём отступ срерху и снизу по 15px, а справа и слева по 30px
• margin: 15px 25px 35px 45px; — отступ сверху 15px, слева – 25px, снизу – 30px, справа – 45px

Вместо пикселей вы так же можете задавать %, em, rem и другие единицы.

Обратите внимание, если вы задаёте верхний или нижний отступ для тега , , — то, скорее всего, он не сработает. Это связано с тем что верхний и нижний margin работает только для блочных элементов HTML, а указанные выше теги являются строчными

Для решения проблемы можно дополнительно задать этому тегу CSS свойство display:inline-block; чтобы к нему применялись свойства одновременно блочного и строчного элемента HTML.

​Applying conditionally

Hover, focus, and other states

Tailwind lets you conditionally apply utility classes in different states using variant modifiers. For example, use to only apply the utility on hover.

For a complete list of all available state modifiers, check out the Hover, Focus, & Other States documentation.

Breakpoints and media queries

You can also use variant modifiers to target media queries like responsive breakpoints, dark mode, prefers-reduced-motion, and more. For example, use to apply the utility at only medium screen sizes and above.

To learn more, check out the documentation on Responsive Design, Dark Mode and .

Бонус — красная строка и отступы в абзаце

Для удобства восприятия письменного текста в школе нас заставляли делать на первой строке абзаца «красную строку» — небольшой отступ слева от линии основного текста.

В оформлении веб-страниц это встречается не так часто, но все же встречается и для того чтобы закрыть эту потребность вам нужно знать лишь одно свойство text-indent: 10%; которое я применю к следующему абзацу при помощи этого кода:

Обратите внимание, что я делаю это для примера и поэтому применил свойство в HTML, а не в файле CSS (что такое CSS и зачем он нужен?). Если вы хотите отредактировать подобным образом все абзацы на вашем сайте, добавив красную строку, нужно внести изменения в файл style.css

Либо добавьте в HTML-код страницы код (можно задавать размер отступа в px, либо в %):

Ну вот и все что нужно вам знать по этой теме. А в следующих статьях я расскажу вам о тегах <NOBR> и <BR>, которые применяются в особых случаях.

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

Каждый абзац начинается с тега <p> и заканчивается необязательным закрывающим тегом </p>.

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

В примере 7.1 показано применение абзацев для создания отступов между строками.

Пример 7.1. Использование абзацев

Результат данного примера показан на рис. 7.1.

Рис. 7.1. Отступы на веб-странице при использовании абзацев

Как видно из рисунка, при использовании тега <p> между абзацами возникают слишком большие отступы. От них можно избавиться, если в местах переноса строк добавлять тег <br>. В отличие от абзаца, тег переноса строки <br> не создает дополнительных вертикальных отступов между строками и может применяться практически в любом тексте.

Так, текст примера 7.1 с учетом переноса строк будет преобразован следующим образом (пример 7.2).

Пример 7.2. Тег <br>

Результат примера продемонстрирован на рис. 7.2. Видно, что расстояние между строками текста уменьшилось и он приобрел более компактный вид.

Рис. 7.2. Вид текста с учетом переносов

Step 3: Apply the text-indent in the body section

<p class=»indent»>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce in tortor eget massa imperdiet convallis. Curabitur ut mollis lorem, ut rutrum dui. Integer ut enim ornare, ultrices enim et, vehicula neque. Donec nibh urna, pretium id tellus non, varius auctor ex. Pellentesque posuere urna lacus, eget sollicitudin libero mattis laoreet.
</p>

1 2 3

<pclass=»indent»> Lorem ipsum dolor sit amet,consectetur adipiscing elit.Fusce intortor eget massa imperdiet convallis.Curabitur ut mollis lorem,ut rutrum dui.Integerut enim ornare,ultrices enim et,vehicula neque.Donec nibh urna,pretium id tellus non,varius auctor ex.Pellentesque posuere urna lacus,eget sollicitudin libero mattis laoreet. <p>

Теги оформления основного текста

Позволяют форматировать на уровне символов. Рассмотрим, что с помощью них можно делать.

Жирный шрифт

Нужен, чтобы акцентировать внимание на тексте. Для поисковиков тоже важен, им можно выделять ключевые слова

Отвечают за жирное начертание теги <strong> и <b>.

Верхний и нижний индексы

Могут использоваться в формулах, уравнениях, обозначении некоторых величин.

За создание нижних индексов отвечает тег <sub>, для верхних используется тег <sup>.

Подчёркивание

Этот тип выделения можно использовать для обозначения внесённых в документ изменений или просто чтобы акцентировать на тексте внимание

Ввод компьютерного текста

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

В контейнер <code> заключается код программы, при этом её переменные выделяются тегом <var>, а результат выполнения — <samp>. Контейнер <kbd> содержит текст, который при работе с программой должен с клавиатуры вводить пользователь, а всё, что заключено в теги <pre>, сохраняет исходный формат, включая лишние пробелы и переносы строк.

Цитаты и определения

Программный код будет выглядеть <code> таким образом </code>, переменные обозначаются так: <var>a, b, c</var>, вот <samp>результат выполнения программы<samp>, а это – <kbd>введённый пользователем текст</kbd>. Сохранение исходного форматирования <pre> отображается примерно так </pre>.

Общий пример

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

Браузер интерпретирует этот код так:

Using Clip-path

The property hides everything that is outside the path specified by you. We can use it to clip our text and hide it. The text will still be accessible to screen readers but would be hidden visually. Here is the markup:

This is the CSS that you need to apply:

You can change the values of to see how the text is being clipped:

See the Pen Image Replacement – clip-path Technique by SitePoint (@SitePoint) on CodePen.

The only problem with this technique is that browser support is not good enough just yet. SitePoint recently published an article on the property which discusses the property in much more detail. By the time browser support is ready for this, it’s likely to be unnecessary in most situations as image replacement techniques become redundant.

16.4 Letter and word spacing: the ‘letter-spacing’ and ‘word-spacing’ properties

‘letter-spacing’

Value:	normal | |
Initial:	normal
Applies to:	all elements
Inherited:	yes
Percentages:	N/A
Media:
Computed value:	‘normal’ or absolute length

This property specifies spacing behavior between
text characters. Values have the following meanings:

normal

The spacing is the normal spacing for the current font.
This value allows the user agent to alter the space
between characters in order to justify text.

This value indicates inter-character space in
addition to the default space between
characters. Values may be negative, but there may be
implementation-specific limits.
User agents may not further increase or decrease the inter-character
space in order to justify text.

Character spacing algorithms are user agent-dependent.

In this example, the space between characters in
BLOCKQUOTE elements is increased by ‘0.1em’.

In the following example, the user agent is not permitted
to alter inter-character space:

When the resultant space between two characters is not the same as
the default space, user agents should not use
ligatures.

‘word-spacing’

Value:	normal | |
Initial:	normal
Applies to:	all elements
Inherited:	yes
Percentages:	N/A
Media:
Computed value:	for ‘normal’ the value ‘0’; otherwise the absolute length

This property specifies spacing behavior between words.
Values have the following meanings:

normal

The normal inter-word space, as defined by the current font and/or
the UA.

This value indicates inter-word space in
addition to the default space between
words. Values may be negative, but there may be
implementation-specific limits.

Word spacing algorithms are user agent-dependent. Word spacing is
also influenced by justification (see the property).
Word spacing affects each space (U+0020) and non-breaking space
(U+00A0), left in the text after the white space processing rules have
been applied. The effect of the property on other word-separator
characters is undefined. However general punctuation, characters with
zero advance width (such as the zero with space U+200B) and
fixed-width spaces (such as U+3000 and U+2000 through U+200A) are not
affected.

In this example, the word-spacing between each word in H1 elements is
increased by ‘1em’.

Syntax

text-indent 3mm;
text-indent 40px;


text-indent 15%;


text-indent 5em each-line;
text-indent 5em hanging;
text-indent 5em hanging each-line;


text-indent inherit;
text-indent initial;
text-indent revert;
text-indent unset;

Values

Indentation is specified as an absolute . Negative values are allowed. See values for possible units.

Indentation is a of the containing block’s width.

Indentation affects the first line of the block container as well as each line after a forced line break, but does not affect lines after a soft wrap break.

Inverts which lines are indented. All lines except the first line will be indented.

Recommended method with CSS & HTML

For indenting text or a paragraph, the most commonly used and recommended method would be to use CSS (cascading style sheets). Below are different examples of how CSS can indent text. Each of these examples would be placed between your <head></head> HTML tags.

The following example would create a style class named «tab» that indents the text and paragraph 40 pixels from the left.

<style type="text/css">
<!--
 .tab { margin-left: 40px; }
-->
</style>

Once the code above is in the <head> section, you can use it by adding it to your paragraph (<p>) tags as shown.

<p class="tab">Example of a  tab</p>

Including CSS in your HTML (hypertext markup language) document, as shown above, is called «in-line» CSS. It is useful for quickly making changes, but in the long run, it is difficult to change later.

Instead, you can take all your CSS code and place it a separate file, with the extension .css. Then, you can link to this one file from any HTML document, and that document can use those CSS properties. Using an external CSS file make it easier to change the CSS later, because all the CSS is defined in one place.

To link an external CSS file, add the following line in your HTML document in the <head> element (after the <head> tag, and before the </head> tag). In the following example, we’ve named our .css file basic.css

<link rel="stylesheet" Type="text/css" href="http://www.example.com/basic.css">

Once this .css file has is created, edit the file and add the same CSS code, excluding the <style> and comment tags into it, as shown.

.tab { margin-left: 40px; }

Finally, once the above steps are completed, you can tab any text using the same <p class=»tab»> example we’ve shown above.

There are also other forms of indenting. For example, if you only wanted to indent the first line of a paragraph, instead of using the above CSS line, you would use the following line.

.tab { text-indent:40px }

Tip

You can also indent using a percentage. For example, instead of indenting by 40px (pixels), you could replace the indent with 5% to indent text by 5% of the current view. You can also use an em space when defining the width of an indent.

Bonus tip

You can also change the from a left indent to a right indent by changing margin-left to margin-right.

Выравнивание текста.

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

Запись имела такой вид:

<p align=»center»>текст по центру</p>

В CSS данную задачу берет на себя свойство text-align, которое выравнивает текстовое содержание относительно элемента родителя (например, блока div) или же окна браузера.

text-alignalign

• left — Выровнять текст по левому краю элемента (по умолчанию).
• right — Выровнять текст по правому краю.
• center — Выровнять текст по центру.
• justify — Выровнять текст по обоим краям.

Теперь для того чтобы выровнять текст того же параграфа по центру следует писать так:

<p style=»text-align: center»>текст по центру </p>

— это в этом случае если мы, с помощью атрибута style, внедряем CSS непосредственно в HTML тег.

А вот в примере ниже используется тег <style> в заголовке документа:

<!DOCTYPE HTML PUBLIC «-//W3C//DTD HTML 4.01 Transitional//EN» «http://www.w3.org/TR/html4/loose.dtd»><html><head><title>Выравнивание текста</title><style type=»text/css»>h1 { text-align: center }p { text-align: justify }</style></head><body><h1>Всё о слонах</h1><p>Слон — самое крупное млекопитающее на нашей планете! Самый большой слон из когда-либо живущих на Земле был зарегистрирован в Анголе в 1956 году. Этот самец весил около 12 тон, а в высоту достигал 4,2 метра, что на метр выше среднего Африканского слона.</p><p>Слоны являются королевским символом Азиатской культуры и известны своей отличной памятью и высоким интеллектом. Аристотель однажды сказал, что слон — «животное, которое превосходит всех других в остроумии и интеллекте».</p></body></html>
смотреть пример  

Recommended method using HTML

It is possible to achieve the same results above with an inline style within HTML. While using the above CSS example can make it easier to maintain across multiple web pages, if you need to use a style only once you can use the following example.

<p style="margin-left: 40px">This text is indented.</p>

In this first example, all the text in the paragraph tag is indented 40 pixels from the left. Any other paragraph tags are not indented.

<p style="text-indent: 40px">This text is indented.</p>

In this second example, only the first line of text in the paragraph will be indented 40 pixels from the left. Any additional lines of text in that paragraph are not indented.

Tip

You can also indent using a percentage. For example, instead of indenting by 40px (pixels), you could replace the indent with 5% to indent text by 5% of the current view. You can also use an em space when defining the width of an indent.

Tip

You can also change the from a left indent to a right indent by changing margin-left to margin-right.

Using Display — Fahrner Image Replacement

Unlike other methods, this one requires you to add some extra markup. The idea here is to wrap your text in a element and set its property to . The markup in this case would be:

The CSS would be:

Here is a demo with the of our span element set to :

See the Pen Image Replacement – Display Technique by SitePoint (@SitePoint) on CodePen.

This method, while easy to implement, results in poor accessibility. This is because elements with set to are ignored by screen readers. The exact same issue occurs with set to so you can’t use that one either. What you can do is set to . This will hide the element while still keeping it accessible to screen readers.

Размер текста в CSS.

font-size

В CSS можно указать каждому текстовому элементу свой размер.

Пример:

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Оформление текста</title>
<style type="text/css">
H1 {font-size:50px; /* размер заголовка 50px */}
H2 {font-size:30px; /* размер заголовка 30px */}
H3 {font-size:20px; /* размер заголовка 20px */}
p {font-size:10px; /* размер заголовка 10px */}
</style>
</head>
<body>
<H1>Заголовок-2</H1>
<H2>Заголовок-2</H2>
<H3>Заголовок-3</H3>
<p>Текст на сайте</p>
</body>
</html>

Результат:

Размер заголовка <H1> будет 50px,
<H2> — 30px,
<H3> — 20px,
<p> — 10px.

​Использование пользовательских значений

Настройка вашей темы

Масштаб отступа текста по умолчанию основан на . Вы можете настроить масштаб интервалов, отредактировав или в вашем файле .

tailwind.config.js

Кроме того, вы можете настроить только масштаб текста, отредактировав или в вашем файле .

tailwind.config.js

Дополнительные сведения о настройке темы по умолчанию смотрите в документации .

Произвольные значения

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

Узнайте больше о поддержке произвольных значений в документации по .

Отступ текста

Отступ в первой строке абзаца, имитирующий красную строку, — это один из самых распространенных эффектов для текста. В CSS для указания отступа предназначено свойство text-indent.

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

p { text-indent: 30px; }

Согласно коду нашего примера первая строка любого абзаца будет сдвинута на 30px.

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

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

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Название документа</title>
    <style>
      p {
        text-indent: -40px;
		padding-left: 40px;
      }
    </style>
  </head>

  <body>
    <p>У этого абзаца первая строка будет выступать над остальными на 40px, для просмотра
	выхода строки за границу элемента и ее усечение вследствии этого, просто удалите строку
	CSS-кода добавляющую внутренний отступ к абзацу (padding-left: 40px;).</p>
  </body>
</html>

Попробовать »

Примечание: свойство padding-left было приведено только для примера, как можно выйти из неприятной ситуации

На данный момент на нем можно не заострять внимание. Внутренние отступы и свойство подробно разбираются в главе — Блочная модель

С могут применяться любые единицы измерения длины, в том числе и процентные значения. Размер отступа, установленный в процентах, связан с шириной родительского элемента. Например, если установлен отступ равный 50% и абзац занимает всю ширину окна браузера, то первая строка будет начинаться посередине экрана.

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Название документа</title>
    <style>
      .test1 { text-indent: 25px; }
      .test2 { text-indent: 50%; }
    </style>
  </head>

  <body>
    <p class="test1">Абзац с отступом в 25px. Абзац с отступом в 25px. Абзац с отступом
	в 25px. Абзац с отступом в 25px. Абзац с отступом в 25px. Абзац с отступом в 25px.</p>
    <p class="test2">Абзац с отступом в 50%. Абзац с отступом в 50%. Абзац с отступом
	в 50%. Абзац с отступом в 50%. Абзац с отступом в 50%. Абзац с отступом в 50%.</p>
  </body>
</html>

Попробовать »

Примечание: стоит обратить внимание, что свойство наследуется, что может приводить к непредвиденным результатам:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Название документа</title>
    <style>
      .test1 { text-indent: 15%; }
    </style>
  </head>

  <body>
    <div class="test1">
	  Первая строка текста элемента div будет иметь отступ равный 15% ширины его
	  родительского элемента или ширины окна браузера.
      <p>Первая строка текста элемента p будет иметь отступ, который был унаследован
	  от его родительского элемента.</p>
	</div>
  </body>
</html>

Попробовать »

​Применяя условно

Наведение, фокус и другие состояния

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

Полный список всех доступных модификаторов состояния смотрите в документации Наведение, фокус и другие состояния.

Контрольные точки и медиа-запросы

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

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

Задание красной строки

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

Чтобы задать стиль отдельного элемента необходимо использовать его атрибут style. В значении этого атрибута будут располагаться CSS-стили, описывающие правила отображения. CSS имеет свой набор свойств, применимых к тем или иным элементам. В настоящий момент нам необходимо свойство text-indent. Оно как раз и задает отступ первого предложения, что позволяет нам создать красную строку. Установим это свойство в значение 1.5em. Оно равно одной целой и половине высоты строки.

Полное выражение по формированию отступа у первой строки абзаца записывается как «<p style=“text-indent: 1.5em“>содержание…</p>».

 <!DOCTYPE html> <html>  <head>  <meta charset="utf-8">  <title>Пример красной строки одного абзаца</title>  </head>  <body>  <!-- Абзац с заданным отступом -->  <p style="text-indent: 1.5em">Lorem ipsum dolor sit amet,  consectetuer adipiscing elit. Aenean commodo ligula  eget dolor. Aenean massa. Cum sociis natoque penatibus  et magnis dis parturient montes, nascetur ridiculus mus.  Donec quam felis, ultricies nec, pellentesque eu, pretium  quis, sem. Nulla consequat massa quis enim. Donec pede  justo, fringilla vel, aliquet nec, vulputate eget, arcu.</p>    <!-- Обычный абзац -->  <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.  Aenean commodo ligula eget dolor. Aenean massa. Cum sociis  natoque penatibus et magnis dis parturient montes, nascetur  ridiculus mus.Donec quam felis, ultricies nec, pellentesque  eu, pretium quis, sem. Nulla consequat massa quis enim. Donec  pede justo, fringilla vel, aliquet nec, vulputate eget, arcu.</p>  </body> </html>

Если вы хотите задать отступ красной строки сразу для всех абзацев, присутствующих на странице, можете использовать пример, который мы приведем ниже. В нем, в обязательный элемент <head> добавлен элемент <style> со следующим содержанием «p { text-indent: 1.5em }». В задачи тега <style> входит добавление стилей прямо в HTML-разметку страницы, без подключения отдельного файла.

 <!DOCTYPE html> <html>  <head>  <meta charset="utf-8">  <title>Пример красной строки для всех абзацев</title>  <style>             p {                  text-indent: 1.5em;              }         </style>  </head>  <body>  <p>Lorem ipsum dolor sit amet,  consectetuer adipiscing elit. Aenean commodo ligula  eget dolor. Aenean massa. Cum sociis natoque penatibus  et magnis dis parturient montes, nascetur ridiculus mus.  Donec quam felis, ultricies nec, pellentesque eu, pretium  quis, sem. Nulla consequat massa quis enim. Donec pede  justo, fringilla vel, aliquet nec, vulputate eget, arcu.</p>   <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.  Aenean commodo ligula eget dolor. Aenean massa. Cum sociis  natoque penatibus et magnis dis parturient montes, nascetur  ridiculus mus.Donec quam felis, ultricies nec, pellentesque  eu, pretium quis, sem. Nulla consequat massa quis enim. Donec  pede justo, fringilla vel, aliquet nec, vulputate eget, arcu.</p>  </body> </html>

Абзацы в HTML

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

Блоки текста в HTML разделяются между собой при помощи тегов абзаца <p></p>. По вертикали между абзацами появляется небольшой отступ или отбивка.

Как разделить текст абзацами? Пример:

Результат

Первый абзац, помещенный в теги p

Второй абзац, помещенный в теги p

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

Если между вашими абзацами получаются слишком большие отступы (пустые строки), не вздумайте использовать тег для их уменьшения, лучше обратите внимание на файл style.css, в котором прописаны параметры отступов между абзацами. Тег используется для переноса строки — это совсем другое и не следует использовать его для создания абзацев

Что такое перенос строки и зачем он нужен, читайте тут.

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