14. Spacing

07/04/2013 | |
O spacing é o que diz, espaçamento. Os que vou mostrar serão dois: letter-spacing e word-spacing. A princípio, parecem ser a mesma coisa, mas não são e olhem que são super úteis e eu uso bastante, então atenção. A estrutura é como todas as outras, sendo o letter-spacing e o word-spacing as propriedades, vejam.

1. Propriedade

word-spacing: 4px;
letter-spacing: 3px;

A parte sublinhada é a propriedade e a parte em negrito é o valor, coisa que vocês já conhecem, mas o que essas propriedades fazem? Vamos analisá-las em um quadro comparativo para entender melhor.


2. Valores

- Word-spacing: define o espaçamento de palavra por palavra, é como se você adicionasse espaços a mais entre elas. Vejam a diferença de algo com e sem word-spacing, a diferença é clara:

O menino joga bola.
O   menino   joga   bola.

- Letter-spacing: define o espaçamento de letra por letra, as letras ficam amis afastadas e não mais as palavras completas. Vejam como fica: 

O menino joga bola.
O  m e n i n o  j o g a  b o l a .