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

Свойство text-indent указывает размер отступа первой строки внутри текстового блока.

Направление текста определяется свойством direction.

Если указано отрицательное значение, первая строка будет смещена налево.

Свойство text-indent применяется только к первой строке текста внутри элемента.

Значения "each-line" и "hanging" являются экспериментальными.
Значение по умолчанию 0
Применяется К блочным контейнерам.
Наследуется Да
Анимируемое Да. Свойство text-indent анимируемо.
Версия CSS1
DOM синтаксис object.style.textIndent = "100px";

Синтаксис

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

Пример

<!DOCTYPE html>
<html>
  <head>
    <title>Заголовок документа</title>
    <style>
      p {
      text-indent: 100px;
      }
    </style>
  </head>
  <body>
    <h2>Пример свойства text-indent</h2>
    <p>Текст со свойством text-indent. Текст со свойством text-indent. Текст со свойством text-indent. Текст со свойством text-indent. Текст со свойством text-indent. Текст со свойством text-indent.</p>
  </body>
</html>

Рассмотрим другой пример, где отступ указан в единицах измерения pt, em, % и cm:

Пример

<!DOCTYPE html>
<html>
  <head>
    <title>Заголовок документа</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</h2>
    <h3>text-indent: 20pt</h3>
    <div class="a">
      Lorem Ipsum - это текст-"рыба", часто используемый в печати и вэб-дизайне. Lorem Ipsum является стандартной "рыбой" для текстов на латинице с начала XVI века. В то время некий безымянный печатник создал большую коллекцию размеров и форм шрифтов, используя Lorem Ipsum для распечатки образцов.
    </div>
    <h3>text-indent: -5em</h3>
    <div class="b">
      Lorem Ipsum - это текст-"рыба", часто используемый в печати и вэб-дизайне. Lorem Ipsum является стандартной "рыбой" для текстов на латинице с начала XVI века. В то время некий безымянный печатник создал большую коллекцию размеров и форм шрифтов, используя Lorem Ipsum для распечатки образцов.
    </div>
    <h3>text-indent: 70%</h3>
    <div class="c">
      Lorem Ipsum - это текст-"рыба", часто используемый в печати и вэб-дизайне. Lorem Ipsum является стандартной "рыбой" для текстов на латинице с начала XVI века. В то время некий безымянный печатник создал большую коллекцию размеров и форм шрифтов, используя Lorem Ipsum для распечатки образцов.
    </div>
    <h3>text-indent: 4em</h3>
    <div class="d">
    Lorem Ipsum - это текст-"рыба", часто используемый в печати и вэб-дизайне. Lorem Ipsum является стандартной "рыбой" для текстов на латинице с начала XVI века. В то время некий безымянный печатник создал большую коллекцию размеров и форм шрифтов, используя Lorem Ipsum для распечатки образцов.
    <h3>text-indent: 5cm</h3>
    <div class="e">
      Lorem Ipsum - это текст-"рыба", часто используемый в печати и вэб-дизайне. Lorem Ipsum является стандартной "рыбой" для текстов на латинице с начала XVI века. В то время некий безымянный печатник создал большую коллекцию размеров и форм шрифтов, используя Lorem Ipsum для распечатки образцов.
    </div>
  </body>
</html>

Значения

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

Поддержка браузера

chrome edge firefox safari opera
1.0+ 12.0+ 1.0+ 1.0+ 3.5+

Практикуйте свои знания

What is the main purpose of the text-indent property in CSS?
Считаете ли это полезным?