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

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



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ż

Kończące się tło strony w przypadkowych miejscach... Czasami podczas tworzenia strony internetowej zdarza się, że w nadrzędny (okalający) element (np. div), w którym znajduje się nasze tło kończy się szy...
Efekt karteczki z dziurką dla Tagów na blogu ̵... Jak pewnie już zauważyliście, albo i nie na moim blogu tagi umieszczone są na takich małych żółtych (symbolicznie) karteczkach z dziurką. Efekt ten je...
Ciekawe efekty na tekście z zastosowaniem cienia Tym razem przygotowałam dla was zbiór kilku ciekawych efektów z zastosowaniem text-shadow - czyli cienia pod tekstem. Oczywiście te animacje wykorz...
Automatyczne odświeżanie strony Prowadząc portal internetowy lub często aktualizowaną stronę gdzie nowy artykuł może pojawić się w ciągu kilku minut chcielibyśmy na bieżąco pojawiały...

Dodaj komentarz

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