text-indent

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

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

Синтаксис

/* значение <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;
}

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

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

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