A word-spacingpropriedade é semelhante a letter-spacing, embora naturalmente seu uso controle a quantidade de espaço entre as palavras em um trecho de texto, não os caracteres individuais.
p ( word-spacing: 2em; )word-spacing pode receber três valores diferentes:
- a palavra-chave “normal”, que redefine o espaçamento padrão
- valores de comprimento usando qualquer unidade CSS (mais comumente px, em, rem)
- a palavra-chave “herdar”, que aplica o
word-spacingdo elemento pai
A melhor prática neste momento seria usar em. O tamanho da fonte pode ser ajustado, então usar pixels para isso pode causar problemas no espaçamento entre as palavras e não escalar como seu tamanho. remgeralmente é ótimo, mas o suporte do navegador é menor e, neste caso de uso, é provavelmente melhor que o espaçamento seja relevante diretamente para as palavras às quais está sendo aplicado, não para a raiz.
É importante observar que "palavra" neste contexto, na verdade, se refere a uma parte singular de conteúdo embutido, o que significa que word-spacingafeta tanto inline-blockelementos quanto inlineelementos. Neste exemplo, vários desses elementos são espaçados definindo o word-spacingde seu contêiner pai:
Pontos de interesse
- A
word-spacingpropriedade é animável com CSS Transitions. - Embora o uso do valor de "porcentagem" para determinar o espaçamento seja permitido de acordo com as especificações, ele pode produzir resultados imprevisíveis - muitas vezes simplesmente sem efeito algum.
- Definir o espaço em branco como zero é uma das maneiras de lutar contra o espaço entre os elementos do bloco em linha.
Suporte para navegador
| cromada | Safári | Raposa de fogo | Ópera | IE | Android | iOS |
|---|---|---|---|---|---|---|
| Funciona | Funciona | Funciona | Funciona | Funciona | Maioria | Funciona |
Uma observação sobre o suporte do navegador Android: a grande maioria dos dispositivos Android word-spacingoferece suporte - no entanto, alguns dispositivos que usam compilações de Webkit que não são da Apple ou o navegador Netfront não. Os detalhes são detalhados no link QuirksMode acima.