Autor publikacji
Virtual Patriot - Administrator

letter-spacing

Data publikacji
Ostatnio edytowano

Przeznaczenie właściwości letter-spacing

Za pomocą właściwości letter-spacing możemy określić rozmiar dodatkowego odstępu pomiędzy znakami tworzącymi tekst interesującego nas elementu HTML.

Informacje dodatkowe

brak

Informacje techniczne o właściwości letter-spacing

przeznaczenie

element HTML każdego typu

pozycja

dowolna

dziedziczenie

tak

wartość initial

normal

wyjątki initial

brak

animowanie

tak, lecz tylko wartość rozmiar

Interpretacja właściwości letter-spacing

Firefox

tak

Google Chrome

tak

Safari

tak

Opera

tak

Internet Explorer

tak

Edge

tak

Opis wartości właściwości letter-spacing

normal

Wyjaśnienie

Wartość normal jest domyślną wartością właściwości letter-spacing.

Domyślnie znaki tworzące tekst elementu HTML nie posiadają dodatkowego odstępu pomiędzy sobą.

Przykład

  letter-spacing:normal;
znaki tworzące tekst tego elementu "div" nie posiadają dodatkowego odstępu pomiędzy sobą

Kod źródłowy przykładu

<!DOCTYPE HTML>
<html>
  <head>
    <meta charset="utf-8">
    <title>Darmowy Kurs CSS</title>

    <style>
      html {
        font-size:16px;
        font-family:Helvetica, sans-serif;
      }

      div {
        padding:1em;
        font-size:1.3em;
        background-color:#7DCDE8;
      }
    </style>
  </head>

  <body>

    <div>
      znaki tworzące tekst tego elementu "div" nie posiadają dodatkowego odstępu pomiędzy sobą
    </div>

  </body>
</html>

rozmiar

Wyjaśnienie

Za pomocą właściwości letter-spacing oraz dowolnej liczby wraz z wybraną jednostką absolutną lub jednostką relatywną możemy określić rozmiar dodatkowego odstępu pomiędzy znakami tworzącymi tekst interesującego nas elementu HTML.

Wartości ujemne

wartości ujemne zwężają odstęp pomiędzy znakami tworzącymi tekst elementu HTML, lecz nie wszystkie przeglądarki internetowe muszą interpretować tę cechę

Przykład

  letter-spacing:6px;
rozmiar dodatkowego odstępu pomiędzy znakami tworzącymi tekst tego elementu "div" wynosi 6 pikseli, ponieważ do tego elementu "div" została dodana właściwość "letter-spacing" wraz z wartością "6px"

Kod źródłowy przykładu

<!DOCTYPE HTML>
<html>
  <head>
    <meta charset="utf-8">
    <title>Darmowy Kurs CSS</title>

    <style>
      html {
        font-size:16px;
        font-family:Helvetica, sans-serif;
      }

      div {
        letter-spacing:6px;
        padding:1em;
        font-size:1.3em;
        background-color:#7DCDE8;
      }
    </style>
  </head>

  <body>

    <div>
      rozmiar dodatkowego odstępu pomiędzy znakami tworzącymi tekst tego elementu "div" wynosi 6 pikseli, ponieważ do tego elementu "div" została dodana właściwość "letter-spacing" wraz z wartością "6px"
    </div>

  </body>
</html>