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

правити

Переглядачі

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

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

Переглядач
text-indent	1.0	1.0	1.0	3.5	12.0	3.0

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

Переглядач
text-indent	1.0	1.0	1.0

Приклади

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

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

p {
    text-indent: 50px;
}