CSS word-spacing Property
Use the word-spacing CSS property for specifying the space between the words in a text. Read about property values and try examples.
The word-spacing property allows changing the space between the words in a piece of text, not the individual characters.
This property can have either a positive or negative value. A positive value adds additional space between words, whereas a negative value removes the space between words. When the property is set to "normal", the defined font will specify the space between the words.
To remove the space between inline-block elements, you can set the container's font-size to 0 or use negative margins.
The word-spacing property can be animated using the transition property.
The word-spacing property is used on inline content.
| Initial Value | normal |
|---|---|
| Applies to | All elements. It also applies to ::first-letter and ::first-line. |
| Inherited | Yes. |
| Animatable | Yes. Word-spacing is animatable. |
| Version | CSS1 |
| DOM Syntax | object.style.wordSpacing = "40px"; |
Syntax
Syntax of CSS word-spacing Property
word-spacing: normal | length | initial | inherit;Example of the word-spacing property with the "normal" value:
Example of CSS word-spacing Property with normal value
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
.text {
word-spacing: normal;
}
</style>
</head>
<body>
<h2>Word-spacing property example</h2>
<p class="text">Lorem ipsum is simply dummy text...</p>
</body>
</html>In the following example the space between the words is 20px:
Example of the word-spacing property specified in "px":
Example of CSS word-spacing Property with length (px) value
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
.text {
word-spacing: 20px;
}
</style>
</head>
<body>
<h2>Word-spacing property example</h2>
<p class="text">Lorem ipsum is simply dummy text...</p>
</body>
</html>Result
Values
| Value | Description | Play it |
|---|---|---|
| normal | Specifies normal word spacing. This is the default value of this property. | Play it » |
| length | Specifies an extra word spacing. Can be specified in px, pt, cm, em, etc. Negative values are valid. | Play it » |
| initial | Makes the property use its default value. | Play it » |
| inherit | Inherits the property from its parents element. |
Practice
What does the CSS 'word-spacing' property do?