CSS text-indent — відступ першого рядка абзацу

Властивість text-indent встановлює величину відступу тексту у першому рядку текстового блоку.

Використовуючи властивість text-indent відступ розглядається як маржа, застосована до початкового краю рядка. Вона впливає лише на лінії, які є першими форматованими лініями елемента (якщо інше не вказано за допомогою ключових слів each-line та / або hanging).

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

Синтаксис:

/* Значення <length> */
text-indent: 3mm;
text-indent: 40px;

/* Значення <percentage> залежить від ширини блоку*/
text-indent: 15%;

/* Значення ключових слів */
text-indent: 5em each-line;
text-indent: 5em hanging;
text-indent: 5em hanging each-line;

/* Міжнародні значення */
text-indent: inherit;
text-indent: initial;

правити

Загальний опис

правити

Нотатка

Допускаються від'ємні значення, тоді перший рядок зміститься вліво.

автор: Svitlana правити

+ додати пораду чи нотатку

Синтаксис

text-indent: length|initial|inherit;

Властивість text-indent може отримувати 6 значень:

length

В якості значення приймаються будь-які одиниці довжини прийняті в CSS. Без задання 0.

автор: Svitlana

правити

initial

Встановлює цю властивість в значення без задання

автор: Svitlana

правити

inherit

Успадкує значення властивості від свого батьківського елемента

автор: Svitlana

правити

percentage

В якості значення приймаються відсотки відносно ширини батьківського блоку.

автор: Svitlana

правити

each-line

Відступи впливають на першу лінію контейнера блоку, а також на кожну лінію після примусового розриву рядка.

автор: Svitlana

правити

hanging

Інвертує, які лінії мають вплив. Усі рядки крім першої лінії, матимуть відступ.

автор: Svitlana

правити

Переглядачі

Стаціонарні переглядачі Мобільні переглядачі

Підтримка: стаціонарні переглядачі

Переглядач
	1	1	1	3.5	12	3

Підтримка: мобільні переглядачі

Переглядач
	4.4	18	4	1

Приклади

+ запропонувати свій приклад у пісочниці

<p>Перший рядок цього абзацу зміщено на 50 пікселів. Текст навмисно довгий, щоб він зайняв кілька рядків — тоді видно, що решта рядків починаються від самого краю.</p>

p {
    text-indent: 50px;
}

<p class="indent">Властивість text-indent зсуває тільки перший рядок абзацу. Решта тексту лишається притиснутою до лівого краю блока, і саме так виглядає класичний книжковий абзац.</p>

<p class="pad">Паддінг зсуває весь абзац цілком. Усі рядки, а не лише перший, починаються з відступу — це зовсім інший результат, хоч відступ той самий.</p>

<p class="hang">Висячий рядок: від'ємний text-indent разом із паддінгом виносить початок абзацу ліворуч, а решта рядків вирівнюється під ним.</p>

p {
    width: 320px;
    margin-bottom: 1.5rem;
    border-left: 2px solid #c0392b;
}

.indent { text-indent: 2em; }

.pad    { padding-left: 2em; }

.hang {
    text-indent: -1.5em;
    padding-left: 1.5em;
}

<p>Вибери потрібне значення для <code>text-indent</code>:</p>

<input type="number" value="0" id="field"></input>

<div id="block">Привіт, я рядочок тексту. Я тут перший і можу рухатися :)<br>А я ще один<br>І я теж рядочок тексту!</div>

body {
	padding: 36px;
  text-align: center;
  line-height: 1.45;
  font-size: 19px;
  font-family: sans-serif;
}

#field {
  padding: 8px;
}

#block {
  border-radius: 4px;
  box-shadow: 2px 2px 4px 0 rgba(0, 0, 0, .45);
  padding: 36px;
  text-align: left;
  background: gold;
  margin: 36px auto 0 auto;
  transition: letter-spacing .15s ease-in 0s;
  letter-spacing: 0;
}

var block = document.getElementById('block');

document.getElementById('field').onchange = function () {
  block.style.textIndent = this.value + 'px';
};
//# sourceURL=pen.js

<div>
  <p class="text">Для нижче записаного тексту задана властивість <i>text-indent: 2em;</i></p>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
  <p>Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>

body {
	padding: 16px;
	font-size: 17px;
}
.text{
  font-size: 18px;
  font-weight: 700;
  text-align: center;
}
p {
  text-indent: 2em;
}