css властивість line-height
Властивість line-height встановлює висоту рядка. Це призводить до того, що рядки тексту розташовуються ближче або далі один від одного.
За звичайних обставин відстань між рядками залежить від виду і розміру шрифту і визначається, браузером, автоматично. Властівість line-height примусово встановлює висоту рядка. Для блокових елементів ця властивість визначає мінімальну висоту рядка тексту. На елементи, що вбудовуються (типу <img>) властивість line-height ніяк не впливає, для рядкових елементів властивість line-height задає висоту рядка блоку.
Будь-яке число більше нуля сприймається як множник від розміру шрифту поточного тексту. Наприклад, значення 1.5 встановлює полуторний міжрядковий інтервал. Як значення приймаються також будь-які одиниці довжини, прийняті в CSS - пікселі (px), дюйми (in), пункти (pt) та ін. Дозволяється використовувати процентний запис, в цьому випадку за 100% береться висота шрифту.
| Нотатка: | Від'ємні значення не підтримуються. |
| Порада: | Також зверніть увагу на такі властивості як |
Синтаксис
line-height: normal|number|length|initial|inherit;Властивість line-height може отримувати 6 значень:
normalЗвичайна висота рядка. Без задання.
numberЧисло, яке буде множитися на поточний розмір шрифту, щоб встановити висоту рядка
lengthФіксована висота рядка в px, pt, cm та інші величини прийняті в CSS.
%Висота рядка у відсотках. Залежить від розміру шрифту.
initialВстановлює властивість у значення без задання
inheritВказує на спадковість властивості від свого батьківського елемента.
| Значення без задання: | normal |
|---|---|
| Наслідує: | Так |
| Анімується: | Так |
| JavaScript синтаксис: | object.style.lineHeight="30px" |
Переглядачі
| Переглядач | ||||||
|---|---|---|---|---|---|---|
| line-height | 1.0 |
4.0 |
1.0 |
1.0 |
7.0 |
12.0 |
| Переглядач | |||
|---|---|---|---|
| line-height | 1.0 |
1.0 |
1.0 |
Мобільних переглядачів ще не додано.
Приклади
Приклад впливу різних значень на рядок тексту
Простий приклад використання властивості
Встановлює висоту рядка в відсотках
p.small {
line-height: 90%;
}
p.big {
line-height: 200%;
}