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> && (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' в этой спецификации.	Рекомендация	Начальное определение

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

BCD tables only load in the browser