Dokumentacja CSS z przykładami: Line Height

Q: Czy line-height powinno mieć jednostkę?

Zwykle nie. Wartość bez jednostki, taka jak 1.5, jest mnożona przez rozmiar czcionki każdego elementu, więc zachowuje proporcje w dzieciach o innym rozmiarze. Wartość z jednostką jest obliczana raz i dziedziczona jako stała długość.

Co robi line-height

line-height ustala wysokość każdej linii tekstu. Różnica między tą wysokością a wysokością potrzebną samej czcionce jest dzielona na pół i dodawana nad literami i pod nimi, więc właśnie tak kontrolujesz odstęp między liniami.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Line height</title>
  <style>
    body { font-family: system-ui, sans-serif; font-size: 16px; color: #111827; }
    .row { display: flex; gap: 16px; align-items: flex-start; }
    p { margin: 0; width: 200px; padding: 8px; background: #e5e7eb; }
    .tight { line-height: 1; }
    .comfy { line-height: 1.5; }
    .double { line-height: 2; }
  </style>
</head>
<body>
  <div class="row">
    <p class="tight">line-height: 1. Lines touch and long text is hard to follow.</p>
    <p class="comfy">line-height: 1.5. Comfortable spacing for a paragraph.</p>
    <p class="double">line-height: 2. Double spacing, like a draft.</p>
  </div>
</body>
</html>

Wszystkie trzy akapity mają czcionkę 16px. Linie mają wysokość 16px, 24px i 32px.

Wartości: bez jednostki, długość, procent, normal

Wartość	Przykład	Wysokość linii dla tekstu 16px	Dziedziczona przez dzieci jako
Liczba	`1.5`	24px	Liczba (1.5), przeliczana dla każdego elementu
Długość	`24px`, `1.5em`, `1.5rem`	24px	Obliczona długość (24px)
Procent	`150%`	24px	Obliczona długość (24px)
`normal`	`normal`	Z czcionki, często około 1.2	`normal`

Pierwszy i drugi wiersz wyglądają na jednym elemencie tak samo. Różnica pojawia się dopiero, gdy dziecko ma inny rozmiar czcionki, o czym mówi następna sekcja.

Dlaczego bez jednostki to dobry wybór domyślny

Wysokość linii 1.5em albo 150% jest zamieniana na piksele na rodzicu, a dzieci dziedziczą te piksele. Dziecko z większą czcionką dostaje wtedy linie niższe niż jego litery. 1.5 bez jednostki jest dziedziczone jako sama liczba i mnożone przez rozmiar czcionki każdego dziecka.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Unitless vs em</title>
  <style>
    body { font-family: system-ui, sans-serif; font-size: 14px; color: #111827; }
    .box { width: 220px; padding: 8px; margin-bottom: 12px; background: #e5e7eb; }
    .em { line-height: 1.5em; }       /* 21px, inherited as 21px */
    .unitless { line-height: 1.5; }   /* inherited as 1.5 */
    h2 { font-size: 32px; margin: 0; }
  </style>
</head>
<body>
  <div class="box em">
    <!-- line-height: 1.5em -->
    <h2 id="em-h">A heading that wraps</h2>
  </div>
  <div class="box unitless">
    <h2 id="num-h">A heading that wraps</h2>
  </div>
  <p id="out"></p>
  <script>
    const lh = (id) => getComputedStyle(document.getElementById(id)).lineHeight;
    document.getElementById('out').textContent =
      'em box heading: ' + lh('em-h') + ', unitless box heading: ' + lh('num-h');
  </script>
</body>
</html>

Oba nagłówki zawijają się na dwie linie. Pierwszy dziedziczy linie 21px przy literach 32px, więc jego linie nachodzą na siebie. Drugi dostaje linie 32 × 1.5 = 48px. Ustaw line-height raz na body jako liczbę, a większość stron nigdy nie będzie potrzebować go ponownie.

Wypróbuj wartości sam

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Line height tester</title>
  <style>
    body { font-family: system-ui, sans-serif; color: #111827; }
    #sample { width: 320px; margin-top: 12px; padding: 8px; background: #e5e7eb; }
  </style>
</head>
<body>
  <label>line-height: <input id="val" value="1.5" size="12"></label>
  <p id="sample">Line height changes the space between the lines of this paragraph. Type a number, a length or a percentage and watch the gaps change.</p>
  <p><code id="out"></code></p>
  <script>
    const sample = document.getElementById('sample');
    const input = document.getElementById('val');
    const show = () => {
      sample.style.lineHeight = input.value;
      document.getElementById('out').textContent =
        'computed: ' + getComputedStyle(sample).lineHeight;
    };
    input.addEventListener('input', show);
    show();
  </script>
</body>
</html>

Wypróbuj 1, 2, 30px, 200% i normal. Chrome zwraca normal jako samo słowo, a nie wartość w pikselach, bo jej rozmiar pochodzi z czcionki.

Dobre wartości dla czytelnego tekstu

Tekst główny: od 1.4 do 1.6. Dłuższe linie potrzebują większej interlinii, żeby oko znalazło początek następnej linii.
Nagłówki: od 1.1 do 1.3. Duży tekst z odstępem 1.5 wygląda jak osobne linie, a nie jeden nagłówek.
Przyciski i jednoliniowe etykiety: od 1 do 1.25, a wysokość daje padding.

Dla dostępności kryterium sukcesu WCAG 1.4.12 wymaga, żeby strona nadal działała, gdy czytelnik ustawi interlinię na 1.5 rozmiaru czcionki, więc unikaj stałych wysokości pól tekstowych, które by ją przycinały.

Wyśrodkowanie jednej linii tekstu w pionie

Gdy pudełko zawiera dokładnie jedną linię, line-height równe wysokości pudełka umieszcza tekst na jego pionowym środku, bo dodatkowe miejsce jest dzielone po równo nad i pod nim:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Single line centering</title>
  <style>
    body { font-family: system-ui, sans-serif; }
    .badge {
      height: 40px;
      line-height: 40px;
      padding: 0 16px;
      width: max-content;
      background: #2563eb;
      color: white;
      border-radius: 20px;
    }
  </style>
</head>
<body>
  <div class="badge" id="badge">One line, centered</div>
</body>
</html>

Przestaje to działać, gdy tylko tekst zawinie się na dwie linie, bo każda linia ma wtedy 40px wysokości. Wszystko, co może się zawijać, wyśrodkuj flexboxem, jak pokazuje strona o wyśrodkowaniu diva.

Skrót font

Skrócona właściwość font ustawia rozmiar i wysokość linii razem, oddzielone ukośnikiem:

body {
  font: 16px/1.5 system-ui, sans-serif; /* size 16px, line-height 1.5 */
}

Skrót resetuje każdą właściwość czcionki, której nie wymienia (w tym line-height do normal, gdy pominiesz część po ukośniku), więc pisz go przed pojedynczymi regułami font-*.

Częste błędy

Używanie em lub % na kontenerze. Dzieci dziedziczą stałą długość. Użyj liczby bez jednostki.
Stałe height na polu tekstowym. Gdy tekst się zawinie albo czytelnik zwiększy odstępy, wyleje się poza pole. Pozwól treści ustalić wysokość.
Zbyt ciasny tekst główny. line-height: 1 utrudnia czytanie akapitów. Zacznij od 1.5.
Oczekiwanie, że line-height doda odstęp między akapitami. Do tego służy margin na akapitach.
Poleganie na normal. Zmienia się w zależności od czcionki, więc układ przesuwa się przy zmianie czcionki.

Najczęściej zadawane pytania

Co robi line-height w CSS?

Ustala wysokość każdego pola linii tekstu. Dodatkowe miejsce ponad wysokość samej czcionki jest dzielone po równo nad literami i pod nimi, więc większe line-height oznacza większy odstęp między liniami.

Czy line-height powinno mieć jednostkę?

Zwykle nie. Wartość bez jednostki, taka jak 1.5, jest mnożona przez rozmiar czcionki każdego elementu, więc zachowuje proporcje w dzieciach o innym rozmiarze. Wartość z jednostką jest obliczana raz i dziedziczona jako stała długość.

Jakie line-height jest dobre dla tekstu?

Od 1.4 do 1.6 dla akapitów i około 1.1 do 1.3 dla dużych nagłówków. Wytyczne WCAG na poziomie AAA wymagają co najmniej 1.5 w akapitach.

Czym jest line-height: normal?

To wartość domyślna. Przeglądarka używa wartości z metryk samej czcionki, zwykle około 1.2, ale innej dla każdej czcionki, więc nie da się jej przewidzieć przy różnych czcionkach.

Jak zmienić interlinię w HTML?

HTML nie ma atrybutu do interlinii. Użyj właściwości CSS, na przykład <p style="line-height: 2;"> dla podwójnej interlinii.

Powiązane zagadnienia