line-height
Ustawia wysokość linii tekstu, czyli odstęp między wierszami.
- Wartość domyślna
normal- Dziedziczona
- Tak
- Animowalna
- tak, jako liczba lub długość
- Dotyczy
- wszystkie elementy
- JavaScript
element.style.lineHeight = "1.6"
Przykład
#body {
line-height: 1.6;
}
h1 {
line-height: 1.15;
}<h1 style="line-height: 1.15; margin: 0 0 8px; font-size: 26px;">Nagłówek w dwóch liniach wygląda zwarto</h1>
<p style="line-height: 1.6; margin: 0;">Tekst akapitu ma większą interlinię, dzięki czemu nawet długi fragment czyta się wygodnie na telefonie i na komputerze.</p>Definicja i zastosowanie
#Właściwość line-height określa wysokość każdej linii tekstu. Wolna przestrzeń rozkłada się równo nad i pod znakami, dlatego większa wartość daje większe odstępy między wierszami.
Najlepiej podawać ją jako liczbę bez jednostki, na przykład 1.6. Taka wartość jest mnożona przez rozmiar czcionki każdego elementu osobno. Wartości z jednostką (24px, 1.5em) są wyliczane raz i dziedziczone jako stała liczba pikseli, co psuje odstępy w elementach z inną czcionką.
Dla tekstu ciągłego dobrze sprawdza się 1.5–1.7, a dla dużych nagłówków mniejsze wartości, na przykład 1.1–1.2.
Składnia
#line-height: normal | <liczba> | <długość> | <procent>;Wartości
#Wartości w praktyce
#normal
.demo { line-height: normal; }1
.demo { line-height: 1; }1.6
.demo { line-height: 1.6; }2.2
.demo { line-height: 2.2; }Obsługa przeglądarek
#Szeroko dostępne
Działa we wszystkich nowoczesnych przeglądarkach, także na telefonach. Możesz używać bez obaw.
- Chrome
- Edge
- Firefox
- Safari
Dobre praktyki
#- Podawaj
line-heightjako liczbę bez jednostki. Unikniesz ściśniętych linii w elementach z większą czcionką. - Wyśrodkowanie jednej linii tekstu w przycisku przez
line-heightrówne wysokości działa, ale Flexbox lub Grid są bezpieczniejsze.
Powiązane hasła
#Widzisz błąd albo brakuje przykładu? Napisz do nas.