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.

* Learn more
* See full compatibility
* Report feedback
Свойство `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;

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

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

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

### Значения

`<length>`

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

`<percentage>`

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

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

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

`hanging` 
Экспериментальная возможность
 (экспериментальное значение)

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

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

text-indent =   
  [ (en-US) <length-percentage> ] (en-US)  && (en-US)  
  hanging? (en-US)                 && (en-US)  
  each-line? (en-US)                 
  
<length-percentage> =   
  <length>      | (en-US)  
  <percentage>    
  
```

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

### HTML


```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


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

Пример со значением <percentage>
--------------------------------

### HTML


```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


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

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

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

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

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.