La word-spacingpropriété est similaire à letter-spacing, bien que naturellement son utilisation régisse la quantité d'espace entre les mots dans un morceau de texte, pas les caractères individuels.
p ( word-spacing: 2em; )word-spacing peut recevoir trois valeurs différentes:
- le mot-clé "normal", qui réinitialise l'espacement par défaut
- valeurs de longueur en utilisant toutes les unités CSS (le plus souvent px, em, rem)
- le mot-clé "inherit", qui applique le
word-spacingde l'élément parent
La meilleure pratique à ce stade serait d'utiliser em. La taille de la police peut être ajustée, donc l'utilisation de pixels pour cela pourrait causer des problèmes d'espacement entre les mots ne serait pas mis à l'échelle comme leur taille. remC'est génial en général, mais la prise en charge du navigateur est plus faible et dans ce cas d'utilisation, il est probablement préférable que l'espacement soit directement lié aux mots auxquels il est appliqué, pas à la racine.
Il est important de noter que «mot» dans ce contexte se réfère en fait à un élément singulier de contenu en ligne - ce qui signifie qu'il word-spacingaffecte des inline-blockéléments aussi bien que des inlineéléments. Dans cet exemple, plusieurs de ces éléments sont espacés en définissant le word-spacingde leur conteneur parent:
Points d'interêts
- La
word-spacingpropriété peut être animée avec des transitions CSS. - Bien que l'utilisation de la valeur «pourcentage» pour déterminer l'espacement soit autorisée conformément aux spécifications, elle peut donner des résultats imprévisibles - souvent simplement aucun effet.
- La mise à zéro de l'espace blanc est l'un des moyens de lutter contre l'espace entre les éléments de bloc en ligne.
Prise en charge du navigateur
| Chrome | Safari | Firefox | Opéra | C'EST À DIRE | Android | iOS |
|---|---|---|---|---|---|---|
| Travaux | Travaux | Travaux | Travaux | Travaux | Les plus | Travaux |
Remarque sur la prise en charge du navigateur Android: la grande majorité des appareils Android prennent en charge - word-spacingcependant, certains appareils utilisant des versions non Apple de Webkit ou du navigateur Netfront ne le font pas. Les détails sont détaillés dans le lien QuirksMode ci-dessus.