Височина на линията - CSS-трикове

В line-heightимота определя размера на пространството над и под вградени елементи. Тоест елементи, които са зададени на display: inlineили display: inline-block. Това свойство най-често се използва за задаване на водещи за редове текст.

p ( line-height: 1.5; )

В line-heightимота може да приеме ценностите на ключови думи normalили noneкакто и номер, дължината, или процент.

Според спецификацията, стойността на „нормално“ не е просто една конкретна стойност, която се прилага към всички елементи, а по-скоро се изчислява до „разумна“ стойност в зависимост от размера на шрифта, зададен (или наследен) за елемента.

Стойността на дължината може да бъде дефинирана с помощта на всяка валидна CSS единица (px, em, rem и т.н.).

Процентна стойност е размерът на шрифта на елемента, умножен по процента. Например:

Вижте тази писалка!

В демонстрацията по-горе височината на трите абзаца е зададена съответно на 150%, 200% и 250%. Размерът на шрифта на елемента body е определен на 20px. Това означава, че изчислените височини на редовете за абзаците са съответно 30px, 40px и 50px.

Височини на безразмерни линии

Препоръчителният метод за определяне на височината на линията е използване на числова стойност, наричана „безразмерна“ височина на реда. Стойността на число може да бъде всяко число, включително десетично базирано число, както се използва в първия пример на кода на тази страница.

Безразмерни височини на редовете се препоръчват поради факта, че дъщерните елементи ще наследят суровата стойност на числото, а не изчислената стойност. С това дъщерните елементи могат да изчисляват височините на линиите си въз основа на изчисления размер на шрифта, вместо да наследяват произволна стойност от родител, която е по-вероятно да се нуждае от замяна.

Поддръжка на браузър

Chrome	Сафари	Firefox	Опера	IE	Android	iOS
Върши работа	Върши работа	Върши работа	Върши работа	Върши работа	Върши работа	Върши работа

IE6 / 7 ще изчисли погрешно височината на линията на заменени елементи (напр. Контроли за формуляри), които са вградени.