css властивість line-height

Властивість line-height встановлює висоту рядка. Це призводить до того, що рядки тексту розташовуються ближче або далі один від одного.

За звичайних обставин відстань між рядками залежить від виду і розміру шрифту і визначається, браузером, автоматично. Властівість line-height примусово встановлює висоту рядка. Для блокових елементів ця властивість визначає мінімальну висоту рядка тексту. На елементи, що вбудовуються (типу <img>) властивість line-height ніяк не впливає, для рядкових елементів властивість line-height задає висоту рядка блоку.

Будь-яке число більше нуля сприймається як множник від розміру шрифту поточного тексту. Наприклад, значення 1.5 встановлює полуторний міжрядковий інтервал. Як значення приймаються також будь-які одиниці довжини, прийняті в CSS - пікселі (px), дюйми (in), пункти (pt) та ін. Дозволяється використовувати процентний запис, в цьому випадку за 100% береться висота шрифту.

правити

Порада

Також зверніть увагу на такі властивості як letter-spacing та word-spacing.

автор: Svitlana правити

Нотатка

Від'ємні значення не підтримуються.

автор: 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

правити

Переглядачі

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

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

Переглядач
line-height	1.0	1.0	1.0	7.0	12.0	4.0

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

Переглядач
line-height	1.0	1.0	1.0

Приклади

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

<p class="small">Стиснуті рядки: цей абзац навмисно довгий, щоб він зайняв кілька рядків і міжряддя було добре видно.</p>
<p class="big">Розріджені рядки: цей абзац теж навмисно довгий, щоб зайняти кілька рядків і показати подвійне міжряддя.</p>

p.small {
    line-height: 90%;
}

p.big {
    line-height: 200%;
}