text-indent¶

Свойство text-indent устанавливает величину отступа первой строки блока текста (например, для абзаца <p>).

Воздействия на все остальные строки не оказывается. Допускается отрицательное значение для создания выступа первой строки, но следует проверить, чтобы текст не выходил за пределы окна браузера.

Демо¶

Текст

Синтаксис¶

/* <length> values */
text-indent: 3mm;
text-indent: 40px;

/* <percentage> value
relative to the containing block width */
text-indent: 15%;

/* Keyword values */
text-indent: 5em each-line;
text-indent: 5em hanging;
text-indent: 5em hanging each-line;

/* Global values */
text-indent: inherit;
text-indent: initial;
text-indent: unset;

Значения¶

В качестве значений принимаются любые единицы длины, принятые в CSS — например, пиксели (px), дюймы (in), пункты (pt) и др. При задании значения в процентах, отступ первой строки вычисляется в зависимости от ширины блока. Допустимо использовать отрицательные значения, но при этом в разных браузерах возможно появление ошибок.

Значение по-умолчанию: 0

Применяется к блочным элементам

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

Поддержка браузерами¶

Can I Use css-text-indent? Data on support for the css-text-indent feature across the major browsers from caniuse.com.

Описание и примеры¶

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>text-indent</title>
        <style>
            p {
                text-indent: 1.5em; /* Отступ первой строки */
                text-align: justify; /* Выравнивание по ширине */
            }
        </style>
    </head>
    <body>
        <p>
            Огневое нападение бывает пяти видов: первое,
            когда сжигают людей; второе, когда сжигают
            запасы; третье, когда сжигают обозы; четвертое,
            когда сжигают склады; пятое, когда сжигают
            отряды.
        </p>
        <p>
            Сунь-цзы, Искусство войны. Перевод Николай
            Конрад.
        </p>
    </body>
</html>