Висота рядка - 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.

Безмірна висота лінії

Рекомендованим методом визначення висоти рядка є використання числового значення, яке називається "безрозмірною" висотою рядка. Значенням числа може бути будь-яке число, включаючи десяткове число, як це використовується в першому прикладі коду на цій сторінці.

Рекомендовані висоти без одиниць рядків через те, що дочірні елементи успадковуватимуть вихідне числове значення, а не обчислене значення. Завдяки цьому дочірні елементи можуть обчислювати свої висоти рядків на основі обчисленого розміру шрифту, а не успадковувати довільне значення від батьків, яке, швидше за все, потребує заміщення.