text-indent

С помощью text-indent можно создать «красную строку» — добавить отступ для первой строки абзаца.

Время чтения: меньше 5 мин

Кратко

Секция статьи "Кратко"

Свойство text-indent управляет отступом первой строки текста: либо вытягивает строку за пределы абзаца, либо утягивает её внутрь. Используется для выделения начала абзаца при плотном наборе без отступов между абзацами.

Строка смещается по горизонтали относительно начала строки.

Пример

Секция статьи "Пример"

Значение в пикселях:

        
          
          div {  text-indent: 20px;}
          div {
  text-indent: 20px;
}

        
        
          
        
      

Процент рассчитывается от ширины блока:

        
          
          div {  text-indent: 15%;}
          div {
  text-indent: 15%;
}

        
        
          
        
      

Значения ключевых слов:

Открыть демо в новой вкладке

Пример корректно отображается только в Safari. Он выглядит следующим образом:

Пример text-indent

Как пишется

Секция статьи "Как пишется"

Ключевые слова

Секция статьи "Ключевые слова"

Ключевые слова являются экспериментальными и официально не предусмотрены в спецификации CSS.

  • hanging — инвертирует отступы в строках. Добавляет отступ в каждой строке, кроме первой.
  • each-line — добавляет отступы в каждой строке после принудительного разрыва строки (с помощью <br>).

Единицы измерения

Секция статьи "Единицы измерения"

Значение свойства можно задать в любых единицах измерения включая проценты. Во втором случае размер отступа будет зависеть от ширины блока, содержащего текст. Допустимо использовать отрицательные значения, но при этом в разных браузерах возможно появление ошибок.