How do I control the spacing between words and letters?

Tutorial Categories:

Author: Deron Eriksson

Description: This CSS tutorial describes how to use the word-spacing and letter-spacing properties to control the spacing between words and letters.

Tutorial created using: Windows XP

The letter-spacing property can be used to specify the spacing between the letters of the text of an element. Its value can be normal, inherit, or a length. The length can be a negative value. The word-spacing property can be used to specify the spacing between words. Its value can also be normal, inherit, or a length, and the length can be negative.

The style-test.html file below demonstrates different word-spacing and letter-spacing values.

style-test.html

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Style Test</title>
</head>
<body>
<div style="word-spacing: normal; letter-spacing: normal;">Here is some text. (normal)</div>
<div style="word-spacing: 6pt;">Here is some text. (word-spacing: 6pt;)</div>
<div style="word-spacing: 1em;">Here is some text. (word-spacing: 1em;)</div>
<div style="word-spacing: -.2em;">Here is some text. (word-spacing: -.2em;)</div>
<div style="letter-spacing: 5px;">Here is some text. (letter-spacing: 5px;)</div>
<div style="letter-spacing: .5em;">Here is some text. (letter-spacing: .5em;)</div>
<div style="letter-spacing: -.08em;">Here is some text. (letter-spacing: -.08em;)</div>
</body>
</html>

The display of style-test.html in IE7 is shown below.

AVAJAVA Web Tutorials

Total Categories: 24, Total Tutorials: 508

Cascading Style Sheets: 34 of 47 tutorials

style-test.html