Odstępy między wierszami tekstu z line-height [CSS]

Kategoria wpisu Kurs CSS, Tekst Tagi: , , on przez .


1 Gwizdka2 Gwizdki3 Gwizdki4 Gwizdki5 Gwizdki (Brak ocen)
Loading...

Reading Time: 1 minute

Z pomocą właściwości CSS line-height możemy wpływać na wielkość odstępów pomiędzy wierszami tekstu. Jak sama nazwa wskazuje line-height to wysokość linii. W efekcie przy odpowiednio dobranych parametrach tekst zacznie na siebie nachodzić (małe wartości niższe od wielkości fontu) lub linie zaczną się od siebie odsuwać.

Przykład zastosowania line-height:

Przykładowy tekst z odstępem
Z kilkoma liniami

Inny przykład z większymi odstępami

Przykładowy tekst z odstępem
Z kilkoma liniami

Kolejny – jak widać słowa zaczynają się na siebie nakładać:

Przykładowy tekst z odstępem
Z kilkoma liniami

Kolejny – jak widać słowa nakładają się na siebie nawzajem:

Przykładowy tekst z odstępem
Z kilkoma liniami

Wspólny kod CSS powyższych przykładów:

 

 
Jak widać na przykładach z pomocą tej właściwości można uzyskać dość ciekawe efekty.

Na powyższych przykładach zastosowałam wartości w px doskonale jednak sprawdzą się też inne wielkości jak % czy em.

Dodaj komentarz

Twój adres email nie zostanie opublikowany. Pola, których wypełnienie jest wymagane, są oznaczone symbolem *