css властивість line-height
Властивість line-height встановлює висоту рядка. Це призводить до того, що рядки тексту розташовуються ближче або далі один від одного.
За звичайних обставин відстань між рядками залежить від виду і розміру шрифту і визначається, браузером, автоматично. Властівість line-height примусово встановлює висоту рядка. Для блокових елементів ця властивість визначає мінімальну висоту рядка тексту. На елементи, що вбудовуються (типу <img>) властивість line-height ніяк не впливає, для рядкових елементів властивість line-height задає висоту рядка блоку.
Будь-яке число більше нуля сприймається як множник від розміру шрифту поточного тексту. Наприклад, значення 1.5 встановлює полуторний міжрядковий інтервал. Як значення приймаються також будь-які одиниці довжини, прийняті в CSS - пікселі (px), дюйми (in), пункти (pt) та ін. Дозволяється використовувати процентний запис, в цьому випадку за 100% береться висота шрифту.
- Порада
-
Також зверніть увагу на такі властивості як
автор: Svitlanaletter-spacingтаword-spacing. - Нотатка
-
Від'ємні значення не підтримуються.
автор: Svitlana
Синтаксис
line-height: normal|number|length|initial|inherit;Властивість line-height може отримувати 6 значень:
-
normal -
Звичайна висота рядка. Без задання.
автор: Svitlana -
number -
Число, яке буде множитися на поточний розмір шрифту, щоб встановити висоту рядка
автор: Svitlana -
length -
Фіксована висота рядка в px, pt, cm та інші величини прийняті в CSS.
автор: Svitlana -
% -
Висота рядка у відсотках. Залежить від розміру шрифту.
автор: Svitlana -
initial -
Встановлює властивість у значення без задання
автор: Svitlana -
inherit -
Вказує на спадковість властивості від свого батьківського елемента.
автор: Svitlana
| Значення без задання: | normal |
|---|---|
| Наслідує: | Так |
| Анімується: | Так |
| JavaScript синтаксис: | object.style.lineHeight="30px" |
Переглядачі
| Переглядач |  |
 |
 |
 |
 |
 |
|---|---|---|---|---|---|---|
| 1 | 1 | 1 | 7 | 12 | 4 |
| Переглядач |  |
 |
 |
 |
|---|---|---|---|---|
| 4.4 | 18 | 4 | 1 |
Приклади
+ запропонувати свій приклад у пісочниці
Висота рядка у відсотках від розміру шрифту: 90% стискає рядки майже до злипання, 200% — розріджує вдвічі.
HTML
<p class="small">Стиснуті рядки: цей абзац навмисно довгий, щоб він зайняв кілька рядків і міжряддя було добре видно.</p>
<p class="big">Розріджені рядки: цей абзац теж навмисно довгий, щоб зайняти кілька рядків і показати подвійне міжряддя.</p>CSS
p.small {
line-height: 90%;
}
p.big {
line-height: 200%;
}Приклад впливу різних значень на рядок тексту
Простий приклад використання властивості
Коментарі
Коментарів ще немає — будьте першим!