text-indent

Интервал Широко используется

Эта функция хорошо зарекомендовала себя и работает на многих устройствах и версиях браузеров. Она доступна в браузерах с июля 2015 года.

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

Попробуйте

Горизонтальное расстояние отсчитывается от левого (или правого, для правосторонней раскладки) края области содержимого элемента-блока.

Синтаксис

/* <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: revert;
text-indent: revert-layer;
text-indent: unset;

Значения

<length>: Отступ задаётся как абсолютная <length>. Разрешаются отрицательные значения. См. <length> для возможных единиц измерения.
<percentage>: Отступ представляет собой <percentage> от ширины содержащего блока.
each-line: Отступ влияет на первую строку контейнера блока, а также на каждую строку после принудительного разрыва строки, но не влияет на строки после мягкого разрыва строки.
hanging: Инвертирует, какие строки будут отступом. Все строки кроме первой будут отступом.

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

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

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

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

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

Примеры

Простой отступ

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

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

Результат

Пропуск отступа для первого абзаца

Распространённая типографическая практика при наличии отступа абзаца — пропуск отступа для первого абзаца. Как говорится в «Справочнике Чикагского стиля», «первая строка текста после подзаголовка может начинаться с выравнивания по левому краю или быть отступленной стандартным отступом абзаца».

Различие первого абзаца от последующих можно реализовать с помощью комбинирования «следующего элемента-блока», как показано в примере:

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;
}

Результат

Отступ в процентах

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

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

Результат

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

Спецификация
CSS Текстовый модуль уровень 3 # text-indent-property

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

	Рабочие столы					Мобильные устройства
	Chrome	Edge	Firefox	Opera	Safari	Chrome Android	Firefox для Android	Opera Android	Safari на iOS	Samsung Internet	WebView Android
`text-indent`	1	12	1	3.5	1	18	4	14	1	1.0	4.4
`each-line`	Нет	Нет	121	Нет	15	Нет	121	Нет	15	Нет	Нет
`hanging`	Нет	Нет	121	Нет	15	Нет	121	Нет	15	Нет	Нет

См. также

© 2005–2024 MDN contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-US/docs/Web/CSS/text-indent