Огляд властивості line-height у CSS-стилях
За допомогою властивості line-height
в CSS встановлюється величина простору між рядками. У блокових елементах властивість впливає на мінімальну висоту рядків усередині елемента. Для вбудованих елементів ця властивість впливає на висоту, яка використовується для обчислення висоти коробки (блоку) рядка.
Але, перш ніж ми почнемо розглядати властивість line-height
більш детально, ми повинні дати пояснення двом важливим моментам: область вмісту елемента (content-area) і коробка рядка (line-box).
Область вмісту елемента (content-area) – це обчислена висота області вмісту елемента. На розмір області вмісту впливають такі властивості, як box-sizing
, width
, min-width
, max-width
, height
, min-height
і max-height
. Ви можете уявити собі область вмісту як область, яка містить текст або графічні елементи, для яких підсумовуються всі вищевказані властивості.
Коробка рядка (line-box). Кожен рядок складається з одного або декількох вбудованих елементів (HTML-тегів). Висота коробки рядка залежить від висоти своїх нащадків. Браузер обчислює висоту для кожного вбудованого елемента і, отже, висоту рядка (від найвищої точки її нащадка до найнижчої точки її нащадка). Тому, коробка рядка завжди має достатню висоту, щоб вмістити всі її дочірні елементи (за замовчуванням). Кожен елемент HTML являє собою набір таких «коробок». Якщо ви знаєте висоту кожної коробки рядка, тоді ви будете знати висоту цього елемента.
І одним з властивостей, які впливають на висоту коробки рядка, є line-height
(тобто, висота рядка). Оскільки висота рядка може бути вище висоти області вмісту, уявіть собі властивість line-height
як властивість, яка визначає віртуальну висоту елемента. Віртуальну, оскільки простір, який вище області вмісту, є невидимим.
Графічно це можна змалювати так:
Висота області вмісту, крім іншого, визначається розміром шрифту.
Висота, вказана в line-height
, використовується для обчислення висоти рядка і коробки рядка.
Вбудовані елементи мають дві різні висоти. Обчислена різниця висот між висотою рядка і області вмісту називається направляючою. Половина цієї направляючої додається поверх області вмісту, а інша половина додається знизу. Тому область вмісту завжди знаходиться в середині цієї віртуальної області.
Виходячи із загального обчисленого значення, висота рядка (віртуальна область) може бути однаковою, більшою або меншою, ніж область вмісту. Якщо значення висоти рядка менше, тоді направляюча має від’ємне значення, а коробка рядка стає візуально менше своїх дочірніх елементів.
Вбудовані елементи, на які впливають ці правила:
- змінення вбудовані елементи (
<img>
,<input>
,<svg>
і т.д.) - блоки з властивістю
inline-block
- вбудовані елементи, які беруть участь в конкретному контексті форматування (наприклад, в елементі
flexbox
всіflex
елементи блокуються)
Для цих конкретних вбудованих елементів висота обчислюється на основі їх значень height
, margin
і border
. Якщо значення для height
встановлено в auto
, тоді використовується line-height
, а область вмісту стає строго рівній висоті рядка.
Тепер залишилося розібратися з проблемою, яким же повинно бути нормальне значення line-height
? Не рекомендується використовувати line-height: 1;
оскільки такі значення (безрозмірні) є відносними від розміру шрифта, а не відносними по відношенню до області вмісту. І дуже часто це призводить до того, що висота рядка (віртуальна область) буде меншою за область вмісту.
Якщо проаналізувати шрифти з Google Web Fonts, то ми побачимо, що більше 90% з них мають висоту рядка (line-height
) більше, ніж 1. Тож, бажано використовувати трохи більші значення за 1.
Додаткові відомості про обчислення коробки рядка:
- для вбудованих елементів,
padding
іborder
збільшують область фону, але не висоту області вмісту (і не висоту коробки рядка). Тому область вмісту не завжди така, якою вона виглядає на екрані. Властивостіmargin-top
іmargin-bottom
не мають впливу. - для замінених вбудованих елементів (
<img>
,<input>
,<svg>
і т. д.), блоків зinline-block
:padding
,margin
іborder
збільшуютьheight
, а значить і висоту області вмісту і висоту коробки рядка.
Останні пости
Чи варто купувати MacBook Air 13 M1: стислий огляд
Макбук Ейр — культова лінійка портативних комп'ютерів від Apple. Усі пристрої відрізняються витонченим дизайном, компактним… Читати далі
Просування в Інтернеті – 10 найбільш дієвих SEO тактик
Якщо ви власник веб-сайту, ви не можете дозволити собі нехтувати SEO. Окрім основ просування та… Читати далі
Які товари найбільш маржинальні
Високомаржинальні товари – це та категорія, яка забезпечує підприємству найвищий рівень прибутку через значну різницю… Читати далі
Як працює рішення SD-WAN: Основи технології та сфери застосування
У сучасному світі, де бізнеси намагаються вдосконалити свої мережі та забезпечити безперервний доступ до додатків… Читати далі
Які строки варто прописати у договорі про розробку програмного забезпечення, щоб зробити процес роботи комфортним та передбачуваним?
Чітке визначення термінів проекту формує очікування, зменшує ризик порушення дедлайнів та посилює продуктивність співпраці між… Читати далі
Комп’ютер: недорогий і функціональний водночас
Важко уявити собі роботу, розваги, спілкування та дозвілля без комп'ютера. Він допомагає у різних сферах… Читати далі