Den word-spacingegenskapen liknar letter-spacing, men naturligtvis dess användning styr mängden utrymme mellan orden i ett stycke text, inte de enskilda tecken.
p ( word-spacing: 2em; )word-spacing kan få tre olika värden:
- det ”normala” nyckelordet, som återställer standardavståndet
- längdvärden med CSS-enheter (oftast px, em, rem)
- nyckelordet "ärva", som tillämpar
word-spacingdet överordnade elementet
Bästa praxis just nu är att använda em. Teckenstorleken kan justeras, så att använda pixlar för detta kan orsaka problem med avståndet mellan ord skulle inte skala som deras storlek gjorde. remär vanligtvis bra, men webbläsarstödet är lägre och i det här användningsfallet är det troligen bäst att avståndet är relevant direkt för de ord det används på, inte roten.
Det är viktigt att notera att "ord" i detta sammanhang faktiskt hänvisar till en enstaka del av inline-innehåll - vilket betyder att det word-spacingpåverkar såväl inline-blockelement som inlineelement. I det här exemplet placeras flera sådana element på avstånd genom att ställa in word-spacingför deras överordnade behållare:
Intressanta platser
- Den
word-spacingegenskapen är animatable med CSS övergångar. - Även om användning av "procent" -värdet för att bestämma avstånd är tillåtet enligt specifikationen, kan det ge oförutsägbara resultat - ofta helt enkelt ingen effekt alls.
- Att sätta vitt utrymme till noll är ett av sätten att bekämpa utrymmet mellan inbyggda blockelement.
Webbläsarstöd
| Krom | Safari | Firefox | Opera | IE | Android | iOS |
|---|---|---|---|---|---|---|
| Arbetar | Arbetar | Arbetar | Arbetar | Arbetar | Mest | Arbetar |
En anmärkning om Android-webbläsarstöd: De allra flesta Android-enheter stöder word-spacingdock, vissa enheter som inte använder Apple-versioner av Webkit eller Netfront-webbläsaren inte. Detaljerna beskrivs i länken QuirksMode ovan.