Свойство CSS text-indent

Свойство CSS text-indent задаёт величину пустого пространства перед первой строкой текстового блока — классический «абзацный отступ», привычный по печатным книгам. Оно влияет только на первую строку каждого блочного элемента; все последующие строки остаются у края блока.

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

Когда и зачем использовать

Типографские абзацные отступы. Отступ первой строки — традиционный способ разделять абзацы без пустых строк между ними; часто применяется в длинных статьях и книжных макетах.
Выступающие отступы. Отрицательный text-indent в сочетании с соответствующим padding-left выдвигает первую строку вперёд, а остальные переносятся с отступом — удобно для библиографий и списков определений.
Доступное скрытие текста. Старый приём text-indent: -9999px уводил текст за пределы экрана, оставляя его доступным для программ чтения с экрана и поисковых систем (сегодня в основном заменён утилитарными классами visually-hidden).

text-indent наследуется, поэтому значение, заданное на родительском элементе, распространяется на дочерние блочные контейнеры, если не переопределено.

Внимание

Значения "each-line" и "hanging" являются экспериментальными.

Начальное значение	0
Применяется к	Блочным контейнерам.
Наследуется	Да.
Анимируемое	Да. Text-indent поддерживает анимацию.
Версия	CSS1
DOM-синтаксис	object.style.textIndent = "100px";

Синтаксис

Синтаксис свойства CSS text-indent

text-indent: length | percentage | each-line | hanging | initial | inherit;

Пример свойства text-indent:

Пример свойства CSS text-indent со значением в px

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      p {
        text-indent: 100px;
      }
    </style>
  </head>
  <body>
    <h2>Text-indent property example</h2>
    <p>
      This is same text with text-indent property. This is same text with text-indent property. This is same text with text-indent property. This is same text with text-indent property. This is same text with text-indent property. This is same text with text-indent property.
    </p>
  </body>
</html>

Попробуйте сами »

Результат

Пример свойства text-indent со значениями "pt", "em", "%" и "cm":

Пример свойства CSS text-indent со значениями pt, cm, % и em

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      div.a {
        text-indent: 20pt;
      }
      div.b {
        text-indent: -5em;
      }
      div.c {
        text-indent: 70%;
      }
      div.d {
        text-indent: 4em;
      }
      div.e {
        text-indent: 5cm;
      }
    </style>
  </head>
  <body>
    <h2>Text-indent property example</h2>
    <h3>text-indent: 20pt</h3>
    <div class="a">
      Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
    </div>
    <h3>text-indent: -5em</h3>
    <div class="b">
      Lorem Ipsum is dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s when an unknown printer took a galley of type and scrambled it to make a type specimen book.
    </div>
    <h3>text-indent: 70%</h3>
    <div class="c">
      Lorem Ipsum is dummied text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s when an unknown printer took a galley of type and scrambled it to make a type specimen book.
    </div>
    <h3>text-indent: 4em</h3>
    <div class="d">
      Lorem Ipsum is dummied text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s when an unknown printer took a galley of type and scrambled it to make a type specimen book.
    </div>
    <h3>text-indent: 5cm</h3>
    <div class="e">
      Lorem Ipsum is dummied text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s when an unknown printer took a galley of type and scrambled it to make a type specimen book.
    </div>
  </body>
</html>

Попробуйте сами »

Создание выступающего отступа

Отрицательный text-indent в паре с соответствующим padding-left делает отступ у всех строк кроме первой — стандартный приём для ссылок и цитат:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      p.reference {
        text-indent: -2em;
        padding-left: 2em;
      }
    </style>
  </head>
  <body>
    <p class="reference">
      Knuth, Donald E. The Art of Computer Programming. Reading,
      Massachusetts: Addison-Wesley, 1968. This long entry wraps onto
      several lines so you can see the hanging indent in action.
    </p>
  </body>
</html>

Процентные значения

При передаче процентного значения отступ вычисляется от ширины содержащего блока, а не от размера шрифта. Таким образом, text-indent: 10% на контейнере шириной 600px даст отступ в 60px. Поскольку значение относительное, отступ увеличивается и уменьшается при изменении размеров макета, сохраняя пропорциональность на адаптивных страницах.

Значения

Значение	Описание	Попробовать
length	Задаёт отступ в px, pt, cm, em и т. д. Значение по умолчанию — 0. Отрицательные значения допустимы.	Попробовать »
percentage	Задаёт отступ в процентах от ширины содержащего блока.	Попробовать »
each-line	Отступ применяется к первой строке, а также к каждой строке после принудительного переноса, но не после мягкого переноса. Это значение является экспериментальной технологией.
hanging	Инвертирует, какие строки получают отступ. Первая строка отступа не имеет. Это значение является экспериментальной технологией.
initial	Устанавливает для свойства значение по умолчанию.	Попробовать »
inherit	Наследует значение свойства от родительского элемента.

Практика

Что делает свойство text-indent в CSS?

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

Связанные свойства

Для более тонкого управления пробелами и потоком текста см. связанные разделы:

text-align — горизонтальное выравнивание текста внутри блока.
line-height — вертикальный интервал между строками.
letter-spacing и word-spacing — межсимвольный и межсловный интервалы.
white-space — обработка пробельных символов и переносов строк.
direction — направление письма, определяющее, от какого края начинается text-indent.