Эта страница была переведена с английского языка силами сообщества. Вы тоже можете внести свой вклад, присоединившись к русскоязычному сообществу MDN Web Docs.

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;
}

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

Specification
CSS Text Module Level 3
# text-indent-property

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

BCD tables only load in the browser