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;
| Нотатка: | Допускаються від'ємні значення, тоді перший рядок зміститься вліво. |
Синтаксис
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;
}