CSS Text

p{letter-spacing:5px;}

This one controls the spaces between the individual letters. In printers terms this is called kerning. The numeric values can be negative numbers to bring the text closer together. "Normal" will return it to its default setting overriding any inherited letter-spacing. It has its uses with some fonts that may be difficult to read unless spaced further apart or are farther apart by default then you would like.


p {word-spacing:5mm;}

This one's identical to the one above except it applies to each word rather than the individual letters. Again, "normal" returns it to its default setting, negative numbers are allowed. Not much else I can say about it.

p{line-height:1cm;}

This one controls the line height but in actuality spaces them farther apart doing nothing to the actual text. In printers terms this is called "leading" and refers to a time when they put lead strips in between the lines of text to set them apart. "Normal" is the default value. A "number" with no unit denotation is multiplied by the font height to come up with the space between lines. "Length" a number with a unit denotation (such as the code above) will ad that amount of space and a "percentage" is of the font height for the space between lines. Negative values are not allowed.


p{white-space:pre;}

Normally the browser will add only one space between words even if you have ten. With the code above, the browser treats it just like the HTML tag "pre". That is to add every space to the text like you've typed it on your page. This includes line breaks .

The "nowrap" value will never wrap the line until it encounters a <br> HTML tag. That's great if you want to control the length of your lines. I won't show it here but you can give it a try just for practice if you would like.

There is no shortcut like "text:" with this one so we're pretty much finished with it. Now it's time to move on to borders.

Support us by supporting our advertisers!



© 2004 Terry Lamrouex