CSS letter-spacing

Słownik kwalifikacji INF.03 - Tworzenie i administrowanie stronami i aplikacjami internetowymi oraz bazami danych

CSS letter-spacing

Właściwość letter-spacing określa odstęp między znakami, czyli między literami tekstu. Wartość najczęściej podaje się w jednostkach CSS, np. px, em lub rem.

Przykład

h1 {
  letter-spacing: 10px;
}

Ten styl sprawi, że litery w nagłówkach <h1> będą oddalone od siebie o dodatkowe 10 pikseli.

Różnica między letter-spacing a line-height

To bardzo ważne rozróżnienie:

  • letter-spacing – ustala odstępy między literami,
  • line-height – ustala wysokość linii, czyli odstępy między wierszami tekstu.

Przykład:

p {
  line-height: 24px;
  letter-spacing: 2px;
}

W tym kodzie line-height wpływa na pionowe odstępy między liniami, a letter-spacing na poziome odstępy między znakami.

Ważne na egzaminie

Jeżeli w stylu CSS widzisz zapis letter-spacing: 10px;, poprawna interpretacja brzmi: odstępy między literami wynoszą 10 px.