HTML and CSS Reference
In-Depth Information
Letter Spacing
Using the letter-spacing property, we can adjust the space (or tracking) between the
letters on a page. A positive length value will push letters farther apart from one another,
while a negative length value will pull letters closer together. The keyword value none
will return the space between letters back to its normal size.
Using a relative length value with the letter-spacing property will help ensure that
we maintain the correct spacing between letters as the font-size of the text is changed.
It is, however, always a good idea to double-check our work.
With the CSS here, all of the letters within our <p> elements will appear .5 em closer to-
Click here to view code image
1. p {
2. letter-spacing: -.5em;
3. }
Word Spacing
Much like the letter-spacing property, we can also adjust the space between words
within an element using the word-spacing property. The word-spacing property
accepts the same length values and keywords as the letter-spacing property. Instead
of spacing letters apart, though, the word-spacing property applies those values
between words.
Here every word within a <p> element will be spaced .25 em apart.
Click here to view code image
1. p {
2. word-spacing: .25em;
3. }
Text Properties All Together
Let's revisit our blog teaser demonstration from before, this time adding in a few text -
based properties on top of our font -based properties. The result can be seen in Figure 6.3 .
Search WWH ::

Custom Search