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 Это экспериментальное API, которое не должно использоваться в рабочем коде. (экспериментальное значение)
Отступ добавляется к первой строке блочного контейнера, а также к каждой строке после принудительного разрыва строки (Enter и br), но не влияет на строки после мягкого переноса. 
hanging Это экспериментальное API, которое не должно использоваться в рабочем коде.  (экспериментальное значение)
Отступ добавляется ко всем строкам, кроме первой. 

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

<length-percentage> && (en-US) hanging? (en-US) && (en-US) each-line? (en-US)
где 
<length-percentage> = <length> | (en-US) <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! (en-US)
Характеристика 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.