CSS line-height

CSS line-height

Właściwość line-height określa wysokość wiersza tekstu, czyli pionowy odstęp zajmowany przez jedną linię tekstu. Nie zmienia bezpośrednio rozmiaru czcionki, ale wpływa na odległość między liniami oraz na wysokość obszaru, w którym tekst jest wyświetlany.

Składnia

p {
  line-height: 24px;
}

Wartość można podać między innymi jako:
- px, np. line-height: 60px; — wysokość wiersza wynosi 60 pikseli,
- liczbę bez jednostki, np. line-height: 1.5; — wysokość wiersza to 1,5 rozmiaru czcionki,
- procent, np. line-height: 150%;,
- słowo kluczowe normal.

Przykład egzaminacyjny

h2 {
  line-height: 60px;
}

Taki zapis oznacza, że nagłówki h2 będą miały wysokość wiersza równą 60 px. Nie oznacza to odstępu między znakami — za to odpowiada właściwość letter-spacing.

Typowa pomyłka

line-height dotyczy układu tekstu w pionie, a letter-spacing dotyczy odstępów między literami w poziomie.

h2 {
  letter-spacing: 5px; /* odstęp między znakami */
  line-height: 60px;   /* wysokość wiersza */
}

Na egzaminie warto zapamiętać: line = linia/wiersz, więc line-height to wysokość linii tekstu.