text-indent

Baseline Widely available *

This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.

* Some parts of this feature may have varying levels of support.

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

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

Начальное значение0
Применяется кблочные контейнеры
Наследуетсяда
Процентыссылается на ширину содержащего блока
Обработка значенияпроцент, как указан или абсолютная длина, а также любые ключевые слова
Animation typeдлина, проценты или calc();

Синтаксис

css
/* Ключевые слова */
text-indent: 5em each-line;
text-indent: 5em hanging;
text-indent: 5em hanging each-line;

/* значение  */
text-indent: 3mm;
text-indent: 40px;

/* значение  зависит от ширины блока*/
text-indent: 15%;

/* международные значения */
text-indent: inherit;
text-indent: initial;
text-indent: unset;

Значения

Отступ определяется как абсолютная длина (). Возможны также отрицательные значения. Статья про значение длины () расскажет больше про возможные единицы измерения.

В процентном () соотношении отступ зависит от ширины всего блока, внутри которого находится строка.

each-line (экспериментальное значение)

Отступ добавляется к первой строке блочного контейнера, а также к каждой строке после принудительного разрыва строки (Enter и br), но не влияет на строки после мягкого переноса.

hanging (экспериментальное значение)

Отступ добавляется ко всем строкам, кроме первой.

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

text-indent = 
  [  ]  &&
  hanging?                 &&
  each-line?               

 = 
        |

Простые примеры отступов

HTML

html

  Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy
  nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.




  Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy
  nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.

CSS

css
p {
  text-indent: 5em;
  background: powderblue;
}

Пример со значением

HTML

html

  Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy
  nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.




  Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy
  nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.

CSS

css
p {
  text-indent: 30%;
  background: plum;
}

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

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

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