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

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

Характеристика 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.

Метки документа и участники

 Внесли вклад в эту страницу: ChristinaKrapivina
 Обновлялась последний раз: ChristinaKrapivina,