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


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

Властивість `line-height`

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

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

Нотатка:

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

Порада:

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

Синтакс

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%; 
}

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

Всі Коментарі (0)

Зареєструйся на сайті, аби мати змогу залишати коментарі. Зареєструватися  чи
Немає Коментарів