Kurs HTML

Wprowadzenie: Odstępy między liniami tekstu (Interlinia)

Właściwość line-height w CSS kontroluje wysokość linii tekstu, czyli pionowy odstęp między kolejnymi liniami w bloku tekstu. Jest to odpowiednik **interlinii** w tradycyjnej typografii.

Odpowiednio ustawiona wysokość linii jest kluczowa dla **czytelności** długich bloków tekstu. Zbyt mała wartość sprawia, że linie nachodzą na siebie, a zbyt duża może rozpraszać i utrudniać śledzenie tekstu wzrokiem.

line-height określa całkowitą wysokość zajmowaną przez linię tekstu, a dodatkowa przestrzeń (różnica między line-height a rozmiarem czcionki font-size) jest rozdzielana równo nad i pod tekstem (tzw. "leading" lub "half-leading").

Wartości dla line-height

Właściwość line-height może przyjmować następujące wartości:

• normal: Domyślna wysokość linii, zależna od przeglądarki i użytej czcionki. Zazwyczaj jest to wartość około 1.2, ale może się różnić.
• <liczba> (bez jednostki): Jest to **zalecana metoda** ustawiania line-height. Liczba ta działa jako **mnożnik aktualnego rozmiaru czcionki (font-size)** elementu. Np. line-height: 1.5; oznacza, że wysokość linii będzie wynosić 1.5 raza rozmiar czcionki. Ta wartość jest dziedziczona jako mnożnik, co zapewnia proporcjonalne skalowanie interlinii przy zmianie rozmiaru czcionki w elementach potomnych.
• <długość>: Określa stałą wysokość linii za pomocą jednostek długości (np. px, em, rem). Np. line-height: 24px; lub line-height: 1.5em;. W przypadku em, wartość jest obliczana na podstawie font-size *samego elementu*. Dziedziczona jest obliczona wartość w pikselach, co może prowadzić do problemów przy różnych rozmiarach czcionek w potomkach.
• <procent>: Określa wysokość linii jako procent aktualnego rozmiaru czcionki (font-size) **samego elementu**. Np. line-height: 150%; jest równoważne line-height: 1.5; lub line-height: 1.5em; dla danego elementu. Podobnie jak przy długościach, dziedziczona jest obliczona wartość w pikselach.

p {
  font-size: 16px;
}

.normal-lh {
  line-height: normal; /* Domyślna przeglądarki, ok. 1.2 * 16px = 19.2px */
}

.unitless-lh {
  /* Zalecane: 1.6 * 16px = 25.6px. Potomkowie odziedziczą mnożnik 1.6 */
  line-height: 1.6; 
}

.length-lh-px {
  line-height: 24px; /* Stała wysokość linii 24px */
}

.length-lh-em {
  /* 1.5 * 16px = 24px. Potomkowie odziedziczą obliczone 24px */
  line-height: 1.5em; 
}

.percentage-lh {
  /* 150% * 16px = 24px. Potomkowie odziedziczą obliczone 24px */
  line-height: 150%; 
}

/* Przykład dziedziczenia */
.rodzic {
  font-size: 20px;
  line-height: 1.5; /* Wysokość linii = 30px */
}

.rodzic .dziecko {
  font-size: 10px;
  /* Dziecko dziedziczy mnożnik 1.5. Jego line-height = 1.5 * 10px = 15px */
}

.rodzic-procent {
  font-size: 20px;
  line-height: 150%; /* Wysokość linii = 30px */
}

.rodzic-procent .dziecko {
  font-size: 10px;
  /* Dziecko dziedziczy obliczoną wartość 30px, co przy font-size 10px wygląda źle! */
}Kopiuj

Dlaczego wartości bez jednostki są zalecane?

Jak pokazano w przykładzie powyżej, główną zaletą używania wartości bez jednostki (np. line-height: 1.6;) jest sposób, w jaki jest ona **dziedziczona**. Elementy potomne dziedziczą sam **mnożnik**, a nie obliczoną wartość w pikselach.

Dzięki temu, jeśli element potomny ma inny font-size niż rodzic, jego line-height zostanie obliczone na podstawie *jego własnego* rozmiaru czcionki, zachowując tę samą proporcję interlinii co u rodzica.

W przypadku użycia jednostek długości (px, em) lub procentów (%), element potomny dziedziczy już **obliczoną wartość** line-height rodzica (w pikselach). Jeśli potomek ma znacznie mniejszy lub większy font-size, odziedziczona, stała wysokość linii może wyglądać bardzo źle (linie mogą na siebie nachodzić lub być zbyt oddalone).

Wniosek: Używaj wartości bez jednostki dla line-height, aby zapewnić przewidywalne i proporcjonalne skalowanie interlinii w zagnieżdżonych elementach.

line-height a czytelność

Optymalna wartość line-height dla tekstu głównego (body text) zazwyczaj mieści się w zakresie **od 1.4 do 1.8**, w zależności od użytej czcionki, szerokości kolumny tekstu i preferencji projektowych.

• Zbyt mała interlinia (blisko 1.0) sprawia, że tekst jest zbity i trudny do czytania.
• Zbyt duża interlinia (powyżej 2.0) może rozpraszać i utrudniać płynne przechodzenie między liniami.

Warto eksperymentować, aby znaleźć wartość, która zapewnia najlepszą czytelność dla danego projektu.

Centrowanie pionowe za pomocą line-height

Ciekawym zastosowaniem line-height jest możliwość **pionowego wyśrodkowania pojedynczej linii tekstu** wewnątrz elementu o stałej wysokości. Jeśli ustawisz line-height elementu na taką samą wartość jak jego height, tekst znajdzie się dokładnie na środku w pionie.

<button class="przycisk">Kliknij mnie</button>Kopiuj

.przycisk {
  height: 40px;
  line-height: 40px; /* Taka sama jak wysokość */
  padding: 0 15px; /* Tylko padding poziomy */
  background-color: lightgray;
  border: 1px solid gray;
  text-align: center;
  display: inline-block; /* Aby wysokość była respektowana */
}Kopiuj

Uwaga: Ta technika działa niezawodnie tylko dla **pojedynczej linii tekstu**. Jeśli tekst zawinie się na dwie lub więcej linii, nie będzie już wyśrodkowany w ten sposób.