width

Властивість width відповідає за ширину елемента. З його допомогою ми можемо збільшувати або зменшувати ширину рядково-блочних (inline - block) та блокових (block) елементів. На малі елементи ця властивість не матиме жодного впливу.

Рядково-блокові (inline - block) елементи за замовчуванням підлаштовуються під ширину контенту, що лежить у них усередині.

Блокові (block) елементи за замовчуванням мають ширину 100%. Якщо представити сайт як документ із текстом, то блоковий елемент займе весь рядок, на якому стоїть.

Крім фіксованої ширини можна задавати елементу мінімальну ширину min-width або максимальну ширину max-width.

У сучасному CSS є логічний аналог цієї властивості - inline-size.

приклад

Скопіювати посилання "Приклад" Скопійовано

Я блоковий елемент!
Я
рядково-блоковий
елемент!
div
class="block">Я блоковий елемент!div>
div
class="inline-block">Яdiv>
div
class="inline-block">рядково-блоковийdiv>
div
class="inline-block">елемент!div>


Копіювати
Скопійовано
Не вдалося скопіювати

Не змінюємо display для .block, оскільки вже є блоковим:

.block  background-color: #2E9AFF;>
.inline-block  display: inline-block;
background-color: #F498AD;>
.block

background-color:
#2E9AFF;
>
.inline-block

display: inline-block;
background-color:
#F498AD;
>


Копіювати
Скопійовано
Не вдалося скопіювати

Завдяки фонам можна побачити, яку ширину має кожен із елементів. Елемент із класом .block зайняв весь рядок, його ширина дорівнює 100% від ширини батька. Елементи з класом .inline - block підлаштували по ширині під контент і стали в один рядок.

Напишемо властивість width і змінимо цю стандартну поведінку.Обмежимо ширину .block до половини вікна, а кожен елемент .inline - block зробимо на всю ширину вікна:

.block  width: 50%;
background-color: #2E9AFF;>
.inline-block  width: 100%;
display: inline-block;
background-color: #F498AD;>
.block

width:
50%;
background-color:
#2E9AFF;
>
.inline-block

width:
100%;
display: inline-block;
background-color:
#F498AD;
>


Копіювати
Скопійовано
Не вдалося скопіювати

Як зрозуміти

Скопіювати посилання "Як зрозуміти" Скопійовано

Властивість width дозволяє керувати шириною елемента.

Як пишеться

Скопіювати посилання "Як пишеться" Скопійовано

Для фіксованої ширини пишемо властивість width. Для мінімальної ширини - min-width. Для максимальної ширини - max-width. Ці три властивості можна вказувати окремо, і навіть комбінувати задля досягнення потрібного результату.

Як значення вказуємо число і відразу після нього без пропуску пишемо одиницю виміру. Ширину можна вказувати як у відносних одиницях - відсотках (%), vw, vmin і так далі, так і в абсолютних одиницях - пікселях (px), rem, em та будь-яких інших одиницях вимірювання, доступних у Інтернеті.

У цьому коді всі значення будуть робітниками:

selector  width: 70%;
min-width: 320px;
max-width: 76rem;>
selector

width:
70%;
min-width:
320px;
max-width:
76rem;
>


Копіювати
Скопійовано
Не вдалося скопіювати

Підказки

Скопіювати посилання "Підказки" Скопійовано

💡 За замовчуванням у блокових (block) елементів ширина дорівнює 100%. У рядково-блочних (inline - block) елементів ширина дорівнює ширині вкладеного контенту.

💡 Ширина у відсотках розраховується від ширини батьківського елемента. Якщо батьківський елемент обмежений по ширині, наприклад, 450 пікселями, то у вкладеного елемента ширина 100% дорівнюватиме 450 пікселям.Тобто 100% батьківського елемента. Якщо при цьому у батька будуть також зазначені внутрішні відступи (padding), то 100% ширини для дитини дорівнюватимуть 450px мінус бічні відступи.

💡 Блоковий ( block ) елемент займає весь рядок незалежно від своєї ширини. Простір, що залишився, займе зовнішній відступ. Тому, обмежуючи ширину блокового елемента, не чекай, що елементи, що йдуть за ним, стануть з ним в один рядок. Якщо потрібно, щоб усі елементи стали в рядок, то потрібно міняти їх з блокових ( block ) на рядково-блокові ( inline - block ).

💡 Обмеживши ширину блокового елемента, можна дуже просто вирівняти його по центру екрана. Для цього пропишемо зовнішній відступ (margin) зі значеннями 0 auto, де 0 відповідає за відступи зверху та знизу, а ключове слово auto – за бічні відступи.

Саме так прийнято вирівнювати контент сайту по центру вікна браузера.

На практиці

Скопіювати посилання "На практиці" Скопійовано

Олена Батицька радить

Скопіювати посилання "Олена Батицька радить" Скопійовано

Властивість width , мабуть, властивість, що найчастіше зустрічається в коді. У роботі ви маніпулюватимете шириною дуже часто.

🛠 Оскільки малі ( inline ) і рядково-блокові ( inline - block ) елементи підлаштовуються по ширині під вкладений контент, то в ситуаціях, коли контенту всередині немає, ширина такого елемента дорівнюватиме нулю. Але часто трапляється, що нам потрібний декоративний елемент. У цьому випадку без сорома сумління задавайте ширину. І не забудь про висоту (height).

Заголовок картки
Якийсь текст новинної картки

div
class="card">
i
class="card__icon">i>
h2
class="card__title">Заголовок карткиh2>
p
class="card__text">Якийсь текст новинної карткиp>
div>


Копіювати
Скопійовано
Не вдалося скопіювати

.card__icon  display: inline-block;
width: 50px;
height: 50px;
background: url('doka-eyes.svg') no-repeat center / cover;>
.card__icon

display: inline-block;
width:
50px;
height:
50px;
background:
url('doka-eyes.svg') no-repeat center / cover;
>


Копіювати
Скопійовано
Не вдалося скопіювати

🛠 Розробники-початківці розбивають текст заголовка або абзацу на рядки за допомогою тега
щоб було точно, як у макеті. У таких випадках варто пам'ятати, що сайти рідко залишаються недоторканними і найчастіше в процесі життя сайту тексти змінюються багаторазово. Тому потрібно писати стилі так, щоб будь-який текст, вставлений у блок, виглядав добре.

Приклад макету:

Як не треба робити:

.

Get the official status of an agent in the projectname and earn with us.
.

. p
class="card__text"> Get the official status of an agentbr> in the projectname and earn with us. p> .

Копіювати
Скопійовано
Не вдалося скопіювати

Як можна зробити:

Краще задайте максимальну ширину, яку має займати текст в елементі. Тоді будь-який текст виглядатиме добре. Нічого страшного, якщо перенесення слів чи рядків на 100% збігатися з макетом. Але таке рішення буде далекоглядним і власники сайту не зіштовхнуться із проблемами при заміні текстів.

.

Get official status of agent in the projectname and earn with us.
.

. p
class="card__text"> Get official status of agent in the projectname and earn with us. p> .

Копіювати
Скопійовано
Не вдалося скопіювати

.card__text  max-width: 50%;
margin: 0 auto; /* Для вирівнювання по центру */>
.card__text

max-width:
50%;
margin:
0 auto;
/* Для вирівнювання по центру */
>


Копіювати
Скопійовано
Не вдалося скопіювати

Тепер будь-який текст займатиме не більше ніж 50% від ширини картки 🎉

Як змінити ширину елемента Властивість width

CSS-властивість width визначає ширину елемента на сторінці. Воно дозволяє керувати розміром елемента та адаптувати його під різні розміри екрана.

Властивість width записується так:

Ширина може бути автоматичною — якщо її не вказати, вона матиме значення auto . У цьому випадку браузер сам вирішить, яку ширину встановити елементу на основі розмірів батьківського елемента та вмісту.

Якщо ви хочете керувати шириною, вкажіть значення — певну ширину елемента. Тоді вона буде постійною або змінюватиметься в залежності від усього довкола на сторінці. Можна використовувати одиниці виміру - наприклад, px, %, em, rem.

Отак — у пікселях, тоді ширина буде постійною. У цьому випадку – 200 пікселів.

А так — у відсотках, тоді ширина змінюватиметься за зміни розмірів вікна. І тут — 50% від ширини батьківського елемента.

У будь-якому варіанті до ширини потрібно ставитись уважно, щоб все зійшлося з макетом.

Якщо поки що не розумієте, навіщо тут фігурні дужки — прочитайте про селектори.

Для чого використовувати властивість width

Один з варіантів – щоб обмежити ширину текстового блоку та покращити читальність на великих екранах. Наприклад, коли ви робите блог і бажаєте, щоб текст не розтягувався на всю ширину екрана. Як на цій сторінці.

Ось так ми стилізуємо елемент із шириною 50%, який знаходиться по центру екрану.

Відносні одиниці вимірювання допомагають створювати адаптивні сторінки. Спробуйте самі — контейнер тягтиметься разом із вікном браузера.

Інший варіант використання – створити сітку на основі флексбоксів із фіксованими розмірами колонок.

.flex-container < display: flex; >.flex-item

Це дуже простий приклад сіток, але якщо цікаво, прочитайте наше покрокове керівництво зі створення адаптивних сіток.

З шириною все взагалі непросто — іноді з незвички можуть статися дивні ситуації, через які доведеться довго гуглити. Давайте про них поговоримо.

Елемент на сторінці ширший, ніж ви задумали

Виновата властивість box-sizing, яка за умовчанням має значення content-box.

Чому так. Коли ви задаєте ширину елемента за допомогою властивості width, вона застосовується лише до вмісту елемента і враховує його відступи, поля ( padding і margin ) і межі ( border ). Це може призвести до того, що загальна ширина елемента буде більшою, ніж очікувалося.

Наприклад, у нас є такий елемент із класом box :

І ми використовуємо такі стилі - ширина 100 пікселів, відступи по 10 пікселів з усіх боків і ще п'ятипіксельний кордон.

Тоді згадуємо математику і вважаємо - загальна ширина елемента із заданою шириною 100px буде насправді дорівнює 130px.

100px + 2 × 10px (відступи) + 2 × 5px (кордону) = 130px

Як відремонтувати. Потрібно включити відступи та межі у задану ширину елемента. Для цього використовуйте властивість box-sizing із значенням border-box :

Тепер загальна ширина елемента дорівнюватиме 100px , тому що відступи та межі будуть включені у вказану ширину. Таку поведінку слід враховувати під час верстки та підготовки макетів, щоб у результаті не виявилося непередбачених сюрпризів.

Ширина елемента більша за ширину батька

Якщо ширина нашого елемента випадково виявилася більшою, ніж у батьківського, він не вміститься. І буде якось так:

Елемент виходить за межі батьківського

Створюємо два вкладені елементи з класами parent та child.

І стилізуємо їх. У parent ширина 100 пікселів, а у child - 200.

Вище ви вже бачили, що станеться в цьому випадку – елемент child із синім фоном виходитиме за межі батьківського елемента з рамкою.

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

Тут ілюстрації навмисно ширші за колонку, щоб дати можливість розглянути подробиці скріншоту.

Хоча якщо вказати тільки width без обмежень, то при зменшенні вікна зображення не вміститься.

Як відремонтувати. Щоб уникнути таких ситуацій, використовуйте відносні одиниці виміру (наприклад, відсотки) або властивості min-width, max-width для обмеження мінімальної та максимальної ширини.

Наприклад, ви можете встановити максимальну ширину для дочірнього елемента, щоб він не перевищував ширину батька:

Тепер дочірній елемент не виходитиме за межі батьківського елемента, навіть якщо його ширина збільшується.

Ну і не забувайте тестувати сайти та перевіряти їх у різних браузерах – це важлива навичка для всіх веб-розробників у будь-якому році.

👉 Всі браузери підтримують властивість width, так що сміливо користуйтеся.

Матеріали на тему

• Не шириною єдиної - властивість height ще заплутаніша, але теж важлива
• Чим відрізняються margin та padding (і як їх більше ніколи не переплутати)
• Як створювати адаптивні сітки

"Доктайп" - журнал про фронтенд. Читайте, слухайте та навчайтеся з нами.

Читати далі

Псевдоклас

Псевдоклас :link CSS призначений для стилізації посилань, які ще не були відвідані користувачем. Цей псевдоклас дозволяє розробникам задавати зовнішній вигляд для невідвіданих посилань окремо від тих, якими користувач вже переходив, що допомагає краще орієнтуватися на сторінці і підвищує зручність використання сайту.

Приклад використання псевдокласу :link для стилізації невідвіданих посилань:

У цьому прикладі для всіх невідвіданих посилань встановлюється синій колір ( #007bff ) і забирається підкреслення. Це робить зовнішній вигляд посилань акуратнішим і одночасно інформативним, оскільки користувач може легко відрізнити їх від вже відвіданих ( :visited ) посилань.

При роботі з :link важливо пам'ятати, що цей псевдоклас повинен використовуватися в поєднанні з псевдокласом :visited для повної стилізації станів посилань. Також рекомендується визначати стилі для псевдокласів :hover та :active , щоб забезпечити інтерактивний та чуйний інтерфейс.

Приклад повного набору стилів для посилань:

a:link < color: #007bff; text-decoration: none; >a:visited < color: #666; >a:hover < color: #0056b3; text-decoration: underline; >a:active

У цьому прикладі задаються різні стилі для всіх можливих станів посилань: :link для невідвідених, :visited для відвіданих, :hover при наведенні курсору та :active у момент натискання на посилання. Такий підхід дозволяє створити більш динамічний та інтуїтивно зрозумілий інтерфейс веб-сторінки.

Селектор нащадків (пробіл)

Селектор нащадків CSS використовується для вибору елементів, які є нащадками іншого елемента в структурі документа. Цей селектор позначається простою пробілом між двома селекторами і дозволяє застосувати стилі до елементів, що знаходяться всередині інших елементів, незалежно від глибини вкладеності.

Приклад використання селектора нащадків:

У цьому прикладі всі абзаци (

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

Селектор нащадків особливо корисний у таких випадках:

1. Структурування контенту: Допомагає стилізувати елементи всередині певних секцій або компонентів, не торкаючись схожих елементів в інших частинах сторінки.
2. Тематичне оформлення: Використовується для застосування унікальних стилів до елементів, які розташовані всередині певних контейнерів, наприклад, для статей, сайдбарів або футерів.
3. Ізоляція стилів: Забезпечує локальне застосування стилів, запобігаючи їх випадковому розповсюдженню на інші елементи документа.

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

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

Псевдоклас

Псевдоклас :focus CSS використовується для стилізації елементів, які отримали фокус. Це може бути, наприклад, текстове поле у ​​формі, до якого користувач перемістив курсор для введення або посилання, вибране через клавіатурне введення. Псевдоклас :focus дозволяє створити більш інтерактивний і доступний інтерфейс користувача, підсвічуючи активні або вибрані елементи.

Приклад використання :focus :

У цьому прикладі для всіх текстових полів (input) при отриманні фокусу змінюватиметься колір кордону на синій та фоновий колір на світло-синій.Це забезпечує наочний зворотний зв'язок користувачеві про те, який елемент форми активний в даний момент, покращуючи загальну доступність користувача і зручність використання інтерфейсу.

Псевдоклас :focus особливо важливий для:

1. Поліпшення доступності: Він допомагає користувачам з обмеженими можливостями або тими, хто використовує клавіатурне введення замість миші, розуміти, який елемент керування в даний момент активний.
2. Підвищення інтерактивності: Візуальна відмінність активних елементів робить інтерфейс більш дружнім та зрозумілим для користувача.
3. Створення стилістичних акцентів: Дозволяє додавати унікальні стилістичні особливості інтерактивних елементів інтерфейсу, підкреслюючи їх функціональність.

Застосування :focus у поєднанні з іншими псевдокласами, такими як :hover та :active , дозволяє створити комплексне візуальне уявлення різних станів елементів управління, роблячи інтерфейс більш інтуїтивно зрозумілим та приємним у використанні.

Однак, важливо пам'ятати, що стилізація елементів за допомогою :focus повинна бути досить помітною, щоб користувач міг легко ідентифікувати фокусований елемент, але при цьому не повинна бути надто нав'язливою, щоб не відволікати від загального сприйняття інтерфейсу.

Селектор з id

CSS-селектор за ідентифікатором (id) дозволяє стилізувати елементи веб-сторінки, які мають унікальний ідентифікатор. Використання селектора по id уможливлює точкове застосування стилів до конкретного елемента, не торкаючись інших елементів на сторінці.

Селектор id позначається знаком решітки ( # ) перед ім'ям ідентифікатора. Ідентифікатори HTML повинні бути унікальними в межах документа, що робить селектор по id потужним інструментом для стилізації конкретних елементів.

Приклад використання селектора по id:

Цей елемент є унікальним.

У цьому прикладі елементу з id="uniqueElement" надаються стилі, що роблять текст зеленим і збільшують розмір шрифту до 20 пікселів. Ці стилі будуть застосовані лише до цього конкретного елемента завдяки унікальності ідентифікатора.

Переваги використання селектора по id:

1. Точкова стилізація: Селектор по ID дозволяє застосовувати стилі до конкретного елемента, не впливаючи на інші елементи.
2. Високий пріоритет: Стилі, застосовані через селектор по ID, мають більш високий пріоритет, ніж стилі, застосовані через класи та теги, що полегшує перевизначення стилів.

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

Використання селектора id є потужним інструментом в арсеналі веб-розробника, дозволяючи точково впливати на стиль окремих елементів сторінки.

Кілька селекторів через кому

Список селекторів CSS являє собою перелік селекторів, розділених комами, що дозволяє застосувати один і той же набір стилів до різних елементів веб-сторінки. Цей метод спрощує написання CSS-коду, позбавляючи необхідності дублювати стилі для кожного типу елементів окремо.

Приклад використання списку селекторів для стилізації заголовків, абзаців та елементів списку:

Застосування списку селекторів є ефективним у багатьох ситуаціях, включаючи:

• Застосування базових стилів тексту (колір, шрифт, розмір) до різних типів елементів.
• Скидання стандартних відступів для елементів списку, параграфів та інших блокових елементів.
• Встановлення загальних стилів для інтерактивних елементів, таких як кнопки та посилання, у різних частинах веб-сторінки.

При роботі зі списком селекторів важливо враховувати, що стилі будуть застосовані до всіх вказаних елементів. Для більш специфічних стильових завдань слід використовувати класи чи ідентифікатори, і навіть більш конкретні типи селекторів.

Списки селекторів покращують читання та підтримуваність CSS-коду, дозволяючи розробникам більш ефективно керувати стилями веб-сторінки. Цей підхід сприяє скороченню дублювання коду та забезпечує більш упорядковану структуру стилів.

Суміжний селектор +

Суміжний селектор CSS, що позначається знаком плюс ( + ), дозволяє вибирати елемент, який є безпосереднім сусідом іншого елемента на тому самому рівні ієрархії DOM. Цей селектор ефективний для застосування стилів до елемента, що знаходиться в точному порядку після іншого елемента в коді HTML.

Приклад застосування суміжного селектора:

Суміжний селектор знаходить широке застосування у веб-розробці для детального налаштування відступів між елементами та для реалізації певних стильових ефектів, що залежать від положення елементів щодо документа.

При використанні суміжного селектора важливо враховувати такі моменти:

• Застосовуйте суміжний селектор з розумом, особливо у складних структурах HTML, оскільки зміни у розмітці можуть вплинути на його працездатність.
• Суміжний селектор ідеальний для випадків, коли необхідно модифікувати стиль елемента в залежності від його розташування по відношенню до попереднього елемента на тому ж рівні.
• Обмежте використання суміжного селектора для підтримки простоти та читання коду, особливо коли йдеться про великі стильові листи.

Дотримання стандартів кодування та увага до деталей в оформленні допоможуть створити легко підтримуваний та гнучкий код CSS, що сприяє ефективній стилізації веб-сторінок.

Селектор тип

Селектори типу CSS використовуються для вибору HTML-елементів, відповідних певному імені тега. Вони дозволяють застосовувати стилі до елементів, не покладаючись на класи або ідентифікатори, що робить їх ідеальними для встановлення базових стилів для стандартних елементів сторінки, таких як абзаци, заголовки та списки.

Приклад використання селектора типу для стилізації всіх абзаців (

) на сторінці:

У цьому прикладі кожному абзацу на веб-сторінці задається шрифт Helvetica, міжрядковий інтервал у півтора рази більший за розмір шрифту та темно-сірий колір тексту. Це базова стилізація, яка може бути перевизначена додатковими селекторами, наприклад селекторами класу або ідентифікатора.

Селектори типу корисні для завдання загальних стилів елементам, які часто використовуються в документі, і є основою каскадності CSS. Вони дозволяють легко підтримувати та оновлювати стилі сайту, надаючи одноманітне представлення елементів по всьому сайту.

При роботі з селекторами типу рекомендується дотримуватися принципів чистого коду та кращих практик веб-розробки:

• Використовуйте типи селекторів для встановлення базових стилів документа, таких як шрифт, розмір тексту та колір.
• Намагайтеся не перевизначати стилі селекторів типу надто специфічними селекторами без необхідності уникнути конфліктів і складнощів з каскадом.
• Для забезпечення читання та підтримуваності коду дотримуйтесь угод про написання CSS, включаючи використання малих літер для селекторів та властивостей, додавання пробілу перед фігурною дужкою та одного рівня відступу для властивостей усередині правила.

Дотримання цих рекомендацій допоможе створити структурований та легко підтримуваний код, який полегшить подальшу розробку та оновлення веб-сайту.

Універсальний селектор *

У CSS універсальний селектор * (зірочка) використовується для застосування стилів до всіх елементів на веб-сторінці. Цей селектор корисний, коли необхідно встановити загальні стилі для всього документа, наприклад, скидання стандартних відступів або завдання базового шрифту.

Приклад використання універсального селектора для скидання стандартних відступів та завдання базового шрифту:

У цьому прикладі всі елементи сторінки обнуляють зовнішні та внутрішні відступи ( margin і padding ), а також встановлюють шрифт Arial як базовий для всього документа.

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

При роботі з CSS важливо дотримуватися рекомендацій щодо стилю коду, щоб забезпечити читання та підтримуваність коду. Наприклад, згідно з рекомендаціями HTML Academy:

• Селектори та властивості записуються малими літерами.
• Перед відкриває фігурною дужкою ставиться пробіл, властивості перераховуються з нового рядка з одним рівнем відступу.
• Після двокрапки в оголошенні якості слідує пробіл.
• Наприкінці оголошення властивості ставиться крапка з комою.
• Між блоками правил залишається один порожній рядок для кращого читання.

Ігри з нескінченністю, або навіщо нам infinity в CSS

💡 Це переклад статті Will Boyd з блогу CodersBlock. Оригінал: https://codersblock.com/blog/playing-with-infinity-in-css/

У CSS є константа Infinity. Коли я тільки дізнався про це, до мене в голову відразу спала гора абсурдних ідей, як це використовувати, серед яких була й пара непоганих.

До речі, якщо що, infinity можна використовувати тільки всередині calc(). Ну поїхали!

🚀 Сьогодні вам безкоштовно доступний тренажер з HTML та CSS.

Міжрядкова відстань у CSS. Властивість line-height

line-height задає інтерліньяж, тобто відстань між базовими лініями сусідніх рядків тексту. Ця властивість може проводити читабельність тексту та її сприйняття.

Значення line-height можна вказувати як абсолютних одиницях (наприклад, px , pt ), і у відносних ( em , % , без одиниці виміру). Рекомендується використовувати відносні одиниці, оскільки вони дозволяють зберегти масштабованість та адаптивність тексту.

• line-height: 1.2; - Відносне значення, що не залежить від розміру шрифту.
• line-height: 20px; - Абсолютне значення, фіксований розмір інтерліньяжу.
• line-height: 1.5em; - Відносне значення, що залежить від розміру шрифту елемента.