text-indent

Свойство text-indent определяет размер отступа (пустого места) перед строкой в текстовом блоке. По умолчанию это свойство управляет отступом только первой строкой блока, однако ключевые слова hanging и each-line могут изменить данное поведение.

Строка смещается по горизонтали к левому или к правому (при размещении текста справа налево) краю блока, в котором содержится элемент.

 

Начальное значение0
Применяется кблочные контейнеры
Наследуетсяда
Процентыссылается на ширину содержащего блока
Отображениевизуальный
Обработка значенияпроцент, как указан или абсолютная длина, а также любые ключевые слова
Animation typeдлина, проценты или calc();
Канонический порядокДлина или процент до ключевых слов, если присутствуют оба. Если присутствуют несколько ключевых слов, они появляются в том же порядке, как и в формальной грамматике.

Синтаксис

/* значение <length> */
text-indent: 3mm;
text-indent: 40px;

/* значение <percentage> зависит от ширины блока*/
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: unset;

Значения

<length> 
Отступ определяется как абсолютная длина (<length>). Возможны также отрицательные значения. Статья про значение длины (<length>) расскажет больше про возможные единицы измерения.
<percentage> 
В процентном (<percentage>) соотношении отступ зависит от ширины всего блока, внутри которого находится строка.
each-line (экспериментальное значение)
Отступ добавляется к первой строке блочного контейнера, а также к каждой строке после принудительного разрыва строки (Enter и br), но не влияет на строки после мягкого переноса. 
hanging  (экспериментальное значение)
Отступ добавляется ко всем строкам, кроме первой. 

Формальный синтаксис

<length-percentage> && hanging? && each-line?
где 
<length-percentage> = <length> | <percentage>

Простые примеры отступов

HTML

<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy 
nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy 
nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>

CSS

p { 
  text-indent: 5em; 
  background: powderblue;
}

Пример со значением <percentage> 

HTML

<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy 
nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy 
nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>

CSS

p { 
  text-indent: 30%; 
  background: plum;
}

Спецификация

Спецификация Статус Комментарий
CSS Text Module Level 3
Определение 'text-indent' в этой спецификации.		 Рабочий черновик Добавили ключевые слова hanging и each-line
CSS Transitions
Определение 'text-indent' в этой спецификации.		 Рабочий черновик Определяет text-indent как анимированное свойство
CSS Level 2 (Revision 1)
Определение 'text-indent' в этой спецификации.		 Рекомендация Подробно определяет поведение блочно-строчных элементов (display: inline-block) и незаполненных блоков (anonymous block boxes)
CSS Level 1
Определение 'text-indent' в этой спецификации.		 Рекомендация Начальное определение

Совместимость с браузерами

We're converting our compatibility data into a machine-readable JSON format. This compatibility table still uses the old format, because we haven't yet converted the data it contains. Find out how you can help!
Характеристика Firefox (Gecko) Chrome Edge Internet Explorer Opera Safari
Базовая поддержка 1.0 (1.7 или ранее) 1.0 (Да) 3.0 3.5 1.0 (85)
hanging Нет[1] Нет Нет Нет Нет Нет
each-line Нет[1] Нет Нет Нет Нет Нет
Характеристика Firefox Mobile (Gecko) Android Edge IE Phone Opera Mobile Safari Mobile
Базовая поддержка 1.0 (1.9.2) ? (Да) ? ? ?
hanging Нет Нет Нет Нет Нет Нет
each-line Нет Нет Нет Нет Нет Нет

[1] Gecko это не поддерживает. Смотрите баг 784648.