CSS Height: як встановити висоту елементів на веб-сторінках

CSS height – це властивість, яка задає висоту елемента. Висота може бути задана в різних одиницях, таких як пікселі, відсотки, одиниці виміру viewport і т.д.

Якщо потрібно задати висоту у відсотках батьківського елемента, можна використовувати властивість height разом із висотою батьківського елемента:

Також можна використовувати властивість "max-height", яка встановлює максимальну висоту елемента незалежно від його вмісту:

Якщо потрібно встановити висоту, що залежить від ширини елемента, можна використовувати відносні одиниці вимірювання viewport (vw, vh).

Також для встановлення висоти можна використовувати властивість "line-height", яка задає висоту рядка тексту:

В цілому, CSS height – це дуже зручна властивість для завдання висоти елементів на веб-сторінках, що дозволяє керувати розташуванням та візуальним виглядом веб-елементів.

height

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

За допомогою властивості height можна задати висоту будь-якому блоковому (block) або рядково-блочному (inline-block) елементу. Висоту можна ставити як і абсолютних одиницях (пікселях px ) і у відносних (відсотки, vh , vmin , rem тощо.).

Крім фіксованої висоти ми можемо задати мінімальну висоту елемента - min-height. У цьому випадку елемент зможе розтягуватися на велику висоту, якщо того вимагає контент, розміщений усередині, але ніколи не стиснеться по висоті менше, ніж зазначено у властивості min-height.

Для максимальної висоти ми пишемо властивість max-height. І тоді елемент матиме можливість розтягуватися по висоті доти, доки досягне розміру, зазначеного у властивості max - height . І далі не розтягнеться ні на піксель.

приклад

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

div
class="container">
div
class="item">div>
div>


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

.container    /* Висота батька */
height: 150px;
padding: 25px;
background-color: #AFC9DA;>
.item    /* Висота вкладеного блоку */
height: 50px;
margin: 0 10px;
background-color: #FFFFFF;>
.container

/* Висота батька */
height:
150px;
padding:
25px;
background-color:
#AFC9DA;
>
.item

/* Висота вкладеного блоку */
height:
50px;
margin:
0
10px;
background-color:
#FFFFFF;
>


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

Оскільки обидва блоки - .container і .item - порожні, в них немає контенту, то без стилів їх висота дорівнюватиме нулю. Ми змінили це, задавши елементу .container висоту 150px, а елементу .item висоту 50px.

Додамо контент елемент .item :

Через фіксовану висоту контент вивалюється з блоку. Як це можна виправити? Замінити height на min-height!

.item    /* Змінюємо фіксовану висоту на мінімальну */
min-height: 50px;
margin: 0 10px;
background-color: #FFFFFF;>
.item

/* Змінюємо фіксовану висоту на мінімальну */
min-height:
50px;
margin:
0
10px;
background-color:
#FFFFFF;
>


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

Тепер, якщо контенту всередині не буде, то висота блоку дорівнюватиме 50px , але як тільки з'явиться контент - елемент розтягнеться по висоті так, щоб вмістити весь контент!

Як зрозуміти

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

Властивість height дає можливість змінювати висоту будь-якого блоку на власний розсуд.

Як пишеться

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

Пишемо властивість height для фіксованої висоти, min – height для мінімальної висоти та max – height для максимальної висоти.

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

Як значення пишемо число, а за ним без пропуску одиницю виміру: px , % , vh , rem , em або будь-яку іншу одиницю виміру, доступну в Інтернеті.

div    height: 10px;
min-height: 100%;
max-height: 100vh;>
div

height:
10px;
min-height:
100%;
max-height:
100vh;
>


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

Підказки

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

💡 Властивість висоти не успадковується.

💡 За замовчуванням задається значення auto .

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

Стилі, до яких немає доступу з фіксованою висотою:

.container    height: 150px;>
.container

height:
150px;
>


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

Твої стилі де перезаписується попереднє значення: тепер висота підлаштовується під контент.

.container    height: auto;>
.container

height: auto;
>


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

Також воно може стати в нагоді при адаптивній верстці.

💡 Не задавайте фіксовану висоту блоків, у яких є контент. Якщо контенту побільшає, то блок не розтягнеться і контент з нього випаде. Не треба так. Якщо без висоти не обійтися, то використовуйте min - height .

💡 Рядкові елементи не реагують на height . Хочете змінити висоту?

💡 Пишете height: 100% і нічого не працює? Пам'ятайте, що висота у відсотках розраховується від висоти батька.

Відносини батьківсько-дочірній елемент простіше пояснити на прикладі.

div
class="parent">
div
class="child child-1">
div
class="grandchild">div>
div>
div
class="child">div>
div
class="child">div>
div>


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

У прикладі вище елемент із класом parent є батьківським для елементів із класом child .

Для елемента з класом grandchild батьківським буде елемент із класом child - 1 .

Стосовно нашої ситуації елемент grandchild буде успадковувати свою висоту від елемента child-1.

На практиці

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

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

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

🛠 Найчастіше не потрібно задавати фіксовану висоту блокам з контентом.

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

Як тільки додасться контент, блок розтягнеться, не станеться ніякого випадання контенту, тому що фіксована висота не задана.Від верхнього та нижнього країв контенту до верхнього або нижнього країв блоку відповідно будуть відступи 25 пікселів.

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

1. Замінити фіксовану висоту на мінімальну: min-height: 150px.

1. Забрати висоту зовсім і замінити її на внутрішні відступи (padding). Цей варіант підійде, якщо не важливо зберегти висоту 150 пікселів.

🛠 Але є кілька ситуацій, у яких без висоти ніяк.

1. У блоці немає вмісту. Він декоративний. Наприклад квадрат. Задаємо однакові висоту та ширину. Profit!
2. Перший екран сайту. Зазвичай дизайнери хочуть, щоб перший екран завжди був по висоті не більше і не менше висоти екрана користувача. В цьому випадку допоможе height: 100vh. Не забудь підстрахуватися та задати мінімальну висоту блоку. Наприклад: min - height: 350px. Ніколи не можна бути впевненим, що висоти екрана користувача достатньо, щоб вмістився весь важливий контент.

🛠 У реальних завданнях вкрай рідко потрібно задавати висоту у відносних одиницях rem та em. Ці одиниці зав'язані розмірі шрифту. Розраховувати висоту блоку від розміру тексту майже не потрібно.

Але інші відносні одиниці: vh , vw , а також vmin і vmax будуть зустрічатися вам набагато частіше. Розраховувати висоту елемента від висоти чи ширини екрана користувача дуже зручно.

Коли у верстці потрібна висота. CSS-властивість height

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

Властивість height та його значення

За висоту елементів відповідає властивість height. Якщо встановити чітке значення, то висота блоку буде завжди однаковою, незважаючи на розмір вмісту.

💡 height - висота внутрішньої області елемента з урахуванням внутрішніх та зовнішніх відступів та рамки border.

Якщо властивість box-sizing не задано, розмір внутрішньої області визначається height і width .

Якщо значення box-sizing задано, воно визначає, якій області вказані розміри.

Висота вимірюється в будь-яких одиницях довжини, які прийняті в CSS: дюйми (in), пікселі (px), пункти (pt) і так далі. Можна також використовувати відсотки, тоді висота обчислюється від батьківського елемента. Якщо батька немає, висота розраховується від вікна браузера.

Якщо висота батьківського блоку не визначена, і ви хочете, щоб зображення зберігало пропорції і не деформувалося, задайте значення height: auto . Тоді висота дорівнюватиме висоті вмісту елемента. Якщо значення не вказати, використовується значення атрибута height з розмітки.

Чи обов'язково вказувати висоту елементів?

Розглянемо простий текстовий блок. По макету блок займає певний простір, тому щоб розмір збігався, пропишемо блоку висоту.

📖 Коренева папка проекту – це робоча область. В ній знаходяться всі файли та папки, необхідні для роботи.

Сховище - це вміст прихованої папки .git, яка додається до проекту при ініціалізації.

У блоці з прикладу два абзацу тексту, висота вказана, все чітко по макету, здається, робота зроблена відмінно. А якщо нам знадобиться ще один абзац?

приклад

📖 Коренева папка проекту – це робоча область. В ній знаходяться всі файли та папки, необхідні для роботи.

Сховище - це вміст прихованої папки .git, яка додається до проекту при ініціалізації.

У цій папці зберігаються всі версії робочої області та службова інформація.

Тоді текст вилізе за межі блоку, і верстка порушиться. Яке рішення?

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

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

приклад

📖 Коренева папка проекту – це робоча область. В ній знаходяться всі файли та папки, необхідні для роботи.

Сховище - це вміст прихованої папки .git, яка додається до проекту при ініціалізації.

У цій папці зберігаються всі версії робочої області та службова інформація.

А чи потрібна тоді взагалі висота?

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

💡 height - задає висоту елемента

min-height - мінімальна висота елемента

max-height - максимальна висота елемента

Уявимо, що вам потрібно згорнути кнопку. Якщо не вкажете height , то висота кнопки змінюватиметься залежно від контенту – при додаванні слів кнопка витягнеться.

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

При заданому значенні min-height всередину кнопки можна додавати скільки завгодно слів, вона розтягуватиметься. При цьому, якщо прибрати весь вміст, кнопка залишиться мінімальною висоти, яку ви вкажете.

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

See the Pen height by midler (@midler) на CodePen.

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

💡 Можливі значення overflow:

• visible (за замовчуванням) - додатковий текст вийде за межі блоку;
• hidden - доданий текст буде прихований і не відобразиться, обріжеться по межах батьківського блоку без прокручування;
• clip – новий контент теж обріжеться. На відміну від hidden забороняє будь-яку прокрутку, межі батьківського блоку розраховуються з урахуванням внутрішніх відступів;
• auto - при переповненні блоку контентом додадуться смуги прокручування;
• scroll - значення схоже на auto, але смуги прокручування видно завжди, навіть якщо переповнення немає.

Ще про верстку

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

Читати далі

Псевдоклас

Псевдоклас :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; - Відносне значення, що залежить від розміру шрифту елемента.