Wysokość linii - CSS-Tricks | Almanach CSS 2025

Ta line-heightwłaściwość określa ilość miejsca nad i pod elementami liniowymi. To znaczy elementy, które są ustawione na display: inlinelub display: inline-block. Ta właściwość jest najczęściej używana do ustawiania interlinii dla wierszy tekstu.

p ( line-height: 1.5; )

line-heightNieruchomość może zaakceptować wartości słów kluczowych normallub none, jak również numer, długość, lub odsetek.

Zgodnie ze specyfikacją wartość „normalna” to nie tylko pojedyncza konkretna wartość zastosowana do wszystkich elementów, ale raczej obliczana na „rozsądną” wartość w zależności od rozmiaru czcionki ustawionego (lub odziedziczonego) w elemencie.

Wartość długości można zdefiniować za pomocą dowolnej prawidłowej jednostki CSS (px, em, rem itp.).

Wartość procentowa to rozmiar czcionki elementu pomnożony przez procent. Na przykład:

Sprawdź ten długopis!

W powyższej wersji demonstracyjnej trzy akapity mają wysokość linii ustawioną odpowiednio na 150%, 200% i 250%. Element body ma rozmiar czcionki zdefiniowany jako 20px. Oznacza to, że obliczone wysokości linii dla akapitów wynoszą odpowiednio 30 pikseli, 40 pikseli i 50 pikseli.

Bezjednostkowe wysokości linii

Zalecaną metodą definiowania wysokości linii jest użycie wartości liczbowej, nazywanej „bezjednostkową” wysokością linii. Wartość liczbowa może być dowolną liczbą, w tym liczbą dziesiętną, tak jak jest to użyte w pierwszym przykładzie kodu na tej stronie.

Bezjednostkowe wysokości linii są zalecane ze względu na fakt, że elementy potomne będą dziedziczyć surową wartość liczbową, a nie wartość obliczoną. Dzięki temu elementy podrzędne mogą obliczać wysokość swoich linii na podstawie obliczonego rozmiaru czcionki, zamiast dziedziczyć dowolną wartość od elementu nadrzędnego, która z większym prawdopodobieństwem będzie wymagała zastąpienia.