Свойство CSS `text-indent`

Свойство text-indent CSS задаёт длину пустого пространства (отступа), которое располагается перед строками текста в блочном элементе.

Попробуйте

text-indent: 0;

text-indent: 30%;

text-indent: -3em;

text-indent: 3em each-line;

text-indent: 3em hanging;

text-indent: 3em hanging each-line;

<section id="default-example">
  <div id="example-element">
    <p>
      This text is contained within a single paragraph. This paragraph is two
      sentences long.
    </p>
    <p>
      This is a new paragraph. There is a line break element
      <code>&lt;br&gt;</code> after this sentence.<br />There it is! Notice how
      it affects the indentation.
    </p>
  </div>
</section>

section {
  font-size: 1.25em;
  background-color: darkslateblue;
  align-items: start;
}

#example-element {
  text-align: left;
  margin-left: 3em;
  background-color: slateblue;
  color: white;
}

Синтаксис

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

/* with keyword values */
text-indent: 5em each-line;
text-indent: 5vb hanging;
text-indent: 5% hanging each-line;

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

Значения

<length>

Отступ задаётся как абсолютная <length>. Допускаются отрицательные значения. Возможные единицы измерения см. в разделе о значениях <length>.

<percentage>

Отступ задаётся в виде <percentage>. Процентное значение относительно внутреннего размера контейнера по строчной оси.

each-line

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

hanging

Инвертирует строки, к которым применяется отступ. Отступ будет у всех строк, кроме первой.

Описание

Свойство text-indent CSS задаёт длину пустого пространства (отступа), которое располагается перед строками текста в блочном контейнере. Отступ, заданный этим свойством, начинается у начального края по строчной оси блока содержимого. Значение представляет собой <length-percentage>, за которым могут следовать одно или оба ключевых слова each-line и/или hanging. Начальное значение — 0.

Процентные значения отсчитываются относительно внутреннего размера блочного контейнера по строчной оси — размера только области содержимого, без внутренних отступов и границы контейнера.

Значение <length-percentage> может быть положительным или отрицательным. Отрицательное значение создаёт выступ, равный абсолютному значению соответствующего положительного значения <length-percentage>. По сути, отрицательное значение смещает текст на величину этого значения, но в противоположном направлении. Например, text-indent: 3%; задаёт отступ первой строки текста, добавляя перед ней пустое пространство размером 3% от внутреннего размера контейнера и смещая первую строку содержимого в направлении конечного края по строчной оси. Значение text-indent: -3% создаёт выступ первой строки текста, смещая её начало на 3% от внутреннего размера контейнера за начальный край области содержимого — во внутренний отступ и границу, что может привести к выходу за пределы контейнера.

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

Формальное определение

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

text-indent = 
  <length-percentage> &&
  hanging? &&
  each-line?

<length-percentage> = 
  <length> |
  <percentage>

Примеры

Основное использование

В этом примере показано основное использование свойства text-indent.

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

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

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

Результат

Процентный отступ

Используя тот же 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

Зададим для text-indent процентное значение. Кроме того, добавим внутренние отступы и вертикальные полосы, чтобы было проще оценить размер отступа относительно блочной модели элемента.

p {
  text-indent: 30%;

  padding: 30px;
  background-image: repeating-linear-gradient(
    to right,
    transparent 0 9.5%,
    #dedede 9.5% 10%
  );
  background-color: plum;
}

Результат

Без отступа у первого абзаца

В типографике принято не задавать отступ первому абзацу, если у последующих абзацев он есть. Как сказано в Chicago Manual of Style: «Первая строка текста после подзаголовка может начинаться от левого края или иметь обычный абзацный отступ».

Чтобы оформлять первые абзацы иначе, чем последующие, можно использовать комбинатор соседнего элемента, как в следующем примере:

HTML

<h2>Lorem ipsum</h2>

<p>
  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse eu
  venenatis quam. Vivamus euismod eleifend metus vitae pharetra. In vel tempor
  metus. Donec dapibus feugiat euismod. Vivamus interdum tellus dolor. Vivamus
  blandit eros et imperdiet auctor. Mauris sapien nunc, condimentum a efficitur
  non, elementum ac sapien. Cras consequat turpis non augue ullamcorper, sit
  amet porttitor dui interdum.
</p>

<p>
  Sed laoreet luctus erat at rutrum. Proin velit metus, luctus in sapien in,
  tincidunt mattis ex. Praesent venenatis orci at sagittis eleifend. Nulla
  facilisi. In feugiat vehicula magna iaculis vehicula. Nulla suscipit tempor
  odio a semper. Donec vitae dapibus ipsum. Donec libero purus, convallis eu
  efficitur id, pulvinar elementum diam. Maecenas mollis blandit placerat. Ut
  gravida pellentesque nunc, in eleifend ante convallis sit amet.
</p>

<h2>Donec ullamcorper elit nisl</h2>

<p>
  Donec ullamcorper elit nisl, sagittis bibendum massa gravida in. Fusce tempor
  in ante gravida iaculis. Integer posuere tempor metus. Vestibulum lacinia,
  nunc et dictum viverra, urna massa aliquam tellus, id mollis sem velit
  vestibulum nulla. Pellentesque habitant morbi tristique senectus et netus et
  malesuada fames ac turpis egestas. Donec vulputate leo ut iaculis ultrices.
  Cras egestas rhoncus lorem. Nunc blandit tempus lectus, rutrum hendrerit orci
  eleifend id. Ut at quam velit.
</p>

<p>
  Aenean rutrum tempor ligula, at luctus ligula auctor vestibulum. Sed
  sollicitudin velit in leo fringilla sollicitudin. Proin eu gravida arcu. Nam
  iaculis malesuada massa, eget aliquet turpis sagittis sed. Sed mollis tellus
  ac dui ullamcorper, nec lobortis diam pellentesque. Quisque dapibus accumsan
  libero, sed euismod ipsum ullamcorper sed.
</p>

CSS

p {
  text-align: justify;
  margin: 1em 0 0 0;
}
p + p {
  text-indent: 2em;
  margin: 0;
}

Результат

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

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

См. также

• Связанные свойства CSS:
  • text-justify
  • text-orientation
  • text-overflow
  • text-rendering
  • text-transform
  • hanging-punctuation
• Модуль декоративного оформления текста CSS
• Модуль текста CSS
• Узнайте, как оформлять HTML с помощью CSS