De word-spacingeigenschap is vergelijkbaar met letter-spacing, hoewel het gebruik ervan natuurlijk de hoeveelheid ruimte tussen de woorden in een stuk tekst bepaalt, niet de individuele tekens.
p ( word-spacing: 2em; )word-spacing kan drie verschillende waarden ontvangen:
- het "normale" trefwoord, waarmee de standaardafstand wordt gereset
- lengte waarden met behulp van CSS-eenheden (meestal px, em, rem)
- het trefwoord "erven", dat de
word-spacingvan het bovenliggende element toepast
De beste praktijk zou op dit moment zijn om em. De lettergrootte kan worden aangepast, dus het gebruik van pixels hiervoor zou problemen kunnen veroorzaken bij de afstand tussen woorden die niet zou worden geschaald zoals hun grootte deed. remis meestal geweldig, maar browserondersteuning is lager en in dit geval is het waarschijnlijk het beste dat de afstand rechtstreeks relevant is voor de woorden waarop deze wordt toegepast, niet voor de root.
Het is belangrijk op te merken dat "woord" in deze context eigenlijk verwijst naar een enkelvoudig stuk inline-inhoud, wat betekent dat word-spacinghet zowel inline-blockelementen als elementen beïnvloedt inline. In dit voorbeeld worden verschillende van dergelijke elementen uit elkaar geplaatst door de word-spacingvan hun bovenliggende container in te stellen:
Nuttige Plaatsen
- De
word-spacingeigenschap is animeerbaar met CSS-overgangen. - Hoewel het gebruik van de "percentage" -waarde om de tussenruimte te bepalen is toegestaan volgens de specificatie, kan dit onvoorspelbare resultaten opleveren - vaak helemaal geen effect.
- Witruimte op nul zetten is een van de manieren om de ruimte tussen inline blokelementen te bestrijden.
Browser-ondersteuning
| Chrome | Safari | Firefox | Opera | D.W.Z | Android | iOS |
|---|---|---|---|---|---|---|
| Werken | Werken | Werken | Werken | Werken | Meest | Werken |
Een opmerking over Android-browserondersteuning: de overgrote meerderheid van Android-apparaten ondersteunt - word-spacingmaar sommige apparaten die niet-Apple builds van Webkit of de Netfront-browser gebruiken, doen dat niet. De details worden gedetailleerd in de QuirksMode-link hierboven.