Page 2 —
Spacing Words and Letters
First up is a pair of properties that enables you to do things you can't do with HTML tags: control the spacing between words and the spacing between individual characters.
word-spacing
With the word-spacing property, you can add additional space between words:
The value you specify will be added to whatever default value the browser already uses. You can use any of the length units we talked about in Lesson 2 when looking at font-size:
- in (inches)
- cm (centimeters)
- mm (millimeters)
- pt (points)
- pc (picas)
- em (ems)
- ex (x-height)
- px (pixels)
Here's word-spacing in action:
Behold the power of cheese.
If your browser doesn't support this CSS property,
click here to see what it looks like.
Don't see anything different? That's probably because your browser doesn't support this property. Only the Mac version of IE 4 likes word-spacing.
letter-spacing
We have better luck with letter-spacing, which affects the kerning between characters and works in IE 4 and 5 (but not in Communicator, alas).
H3 { letter-spacing: 10px }
The functionality is similar to word-spacing: Values are added to the default browser spacing. And you can use any of the same units listed above.
If you're using IE 4 or 5, here's an example:
Behold the power of cheese.
If your browser doesn't support this CSS property, click here to see what it looks like.
For both of these properties, you can also use a value of normal, which will ensure that the default browser spacing is used instead of any inherited word or letter spacing.
Don't be too discouraged! There are a lot of stylesheets properties that do work in both of the major browsers. One example is coming up next.
next page»
|
