Odstępy pomiędzy literami w słowie CSS letter-spacing

Kategoria wpisu Kurs CSS, Kursy, PHP, HTML, CSS, Tekst Tagi: , , , , , , on przez .


1 Gwizdka2 Gwizdki3 Gwizdki4 Gwizdki5 Gwizdki (1 głosów, średnia: 5,00 z 5)
Loading...

Reading Time: 1 minute

Zadaniem właściwości CSS letter-spacing jest ustawianie odległości (odstępów) pomiędzy poszczególnymi literami słowa w tekście. Za jej pomocą możemy więc uzyskać rozszerzony (z dużymi odstępami, przerwami pomiędzy literami) lub zwężony (z nachodzącymi na siebie nawzajem literami) tekst.

letter-spacing – nie może przyjmować wartości procentowych (%) może być jednak określana w px, rem, em.

Domyślnym ustawieniem letter-spacing jest normal.

przykładowe odstępy między literami:
Normalny tekst

Lorem ipsum

Rozszerzony tekst – letter-spacing: 3px;

Lorem ipsum

Zwężony tekst – letter-spacing: -4px;

Lorem ipsum

Jak widać po przykładzie wartości ujemne powodują że tekst zaczyna się zwężać (kurczyć) a dodatnie rozsuwają go.

letter-spacing przyjmuje także wartości takie jak:

Gdzie „normal” to standardowe zwykłe ustawienie, a „initial” ustawia domyślną wartość.

Właściwość ta jest bardzo użyteczna jeśli np. do poprawienia czytelności tekstu na stronie. Taka zmiana czasami może bardzo dużo dać przy niewielkim wysiłku.

dodatkowe tagi:
odstępy między literami css

Przeczytaj również

Dodaj komentarz

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