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	Значение элемента наследуется от родительского элемента.