css властивість text-indent


Властивість 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;

Нотатка:

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

Синтаксис

text-indent: length|initial|inherit;

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

length

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

percentage

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

each-line

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

hanging

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

inherit

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

initial

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

Значення без задання: 0
Наслідує: Так
Анімується: Так
JavaScript синтаксис: object.style.textIndent="50px"

Переглядачі

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

1.0

3.0

1.0

1.0

3.5

12.0

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

1.0

1.0

1.0


Мобільних переглядачів ще не додано.

Приклади


Динамічний приклад впливу різних значень властивості на рядок тексту

Простий приклад використання властивості

Перший рядок абзацу буде зміщено на 50px.

p { 


  text-indent: 50px; 


}

Додаткові посилання