CSS приклад: line-height

Інтерлініяж CSS: опис, синтаксис та значення

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

Синтаксис

line-height: множник | значення | відсотки | normal | inherit

Значення

Будь-яке число більше нуля розглядається як множник від розміру поточного тексту. Наприклад, значення 1.5 встановлює полуторний інтерлініяж. Можна використовувати також будь-які одиниці виміру, прийняті в CSS - пікселі (px), дюйми (in), пункти (pt) тощо. Дозволяється використання відсоткового запису, де 100% представляє висоту шрифта.

normal
Відстань між рядками обчислюється автоматично.
inherit
Наслідує значення батька.

Приклад

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>line-height</title>
  <style>
   h1 {
    line-height: 60%;
   } 
   p {
    line-height: 1.5;
   }
  </style>
 </head> 
 <body> 
  <h1>Duis te feugifacilisi</h1>
  <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem 
  nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat. 
  Ut wisis enim ad minim veniam, quis nostrud exerci tution ullamcorper suscipit 
  lobortis nisl ut aliquip ex ea commodo consequat.</p> 
 </body>
</html>

Результат даного прикладу показаний на рис. 1.

Браузери

Internet Explorer до версії 7.0 неправильно обчислює висоту рядків для зображень та елементів форм. Також цей браузер не підтримує значення inherit.

Часті запитання

  • Q: Як використовувати line-height в CSS?

    A: Line-height в CSS використовується для задання висоти рядка. Можна вказати значення в пікселях, відсотках або бездині. Наприклад: line-height: 1.5;

  • Q: Де використовують line-height в CSS?

    A: Line-height використовується для задання відстані між рядками тексту. Це може бути застосовано в текстових блоках, заголовках, списках тощо.

  • Q: Як впливає line-height на вигляд тексту?

    A: Зміна значення line-height може вплинути на читабельність тексту, вигляд блоків тексту, а також на загальний вигляд сторінки.

  • Q: Чому важливо коректно використовувати line-height в CSS?

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

  • Q: Як підібрати оптимальне значення line-height?

    A: Оптимальне значення line-height залежить від конкретного дизайну та шрифту. Важливо експериментувати зі значеннями, спираючись на зовнішній вигляд тексту на сторінці.