De letter-spacingeigenschap bepaalt de hoeveelheid ruimte tussen elke letter in een bepaald element of blok tekst. Waarden die worden ondersteund door letter-spacingzijn onder andere font-relatieve waarden (em, rem), parent-relatieve waarden (percentage), absolute waarden (px) en de normaleigenschap, die wordt gereset naar de standaard font.
Het gebruik van lettertype-relatieve waarden wordt aanbevolen, zodat de letter-spacingtoename of afname op de juiste manier wanneer de lettergrootte wordt gewijzigd, hetzij door ontwerp of door gebruikersgedrag.
p ( /* 16 * 0.0625 = 1px */ letter-spacing: 0.0625em; )Het belangrijkste om op te merken bij het gebruik letter-spacingis dat de opgegeven waarde de standaardwaarde niet verandert, maar wordt toegevoegd aan de standaardafstand die de browser toepast (op basis van de lettertypestatistieken). letter-spacingondersteunt ook negatieve waarden, waardoor tekst er strakker uitziet in plaats van losser.
Nuttige Plaatsen
- Subpixelwaarden: in de meeste browsers zal het specificeren van een waarde die lager is dan
1pxnietletter-spacingworden toegepast. Momenteel ondersteunen Firefox 14+ en IE 10 subpixel-indeling; Opera en WebKit doen dat niet. De patch is geland, dus WebKit ondersteunt nu subpixel-letterafstand. - De
letter-spacingeigenschap is animeerbaar met CSS-overgangen. - Een van de manieren om de ruimte tussen inline-blokelementen te bestrijden, is
letter-spacing: -4px;door de bovenliggende container van inline-blokelementen in te stellen. U moet dan opnieuw instellenletter-spacing: normal;op de onderliggende elementen. - Het is zelden of nooit een goed idee om kleine letters te spaties.
Browser-ondersteuning
| Chrome | Safari | Firefox | Opera | D.W.Z | Android | iOS |
|---|---|---|---|---|---|---|
| Werken | Werken | Werken | Meest | Werken | Werken | Werken |
Een opmerking over de ondersteuning van mobiele browsers: sommige versies van Opera Mobile, niet-standaard WebKit-implementaties en de NetFront-browser ondersteunen dit niet letter-spacing. De details worden gedetailleerd in de QuirksMode-link hierboven.