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.
If you want to remove the space between inline block elements, you can set the white-space property to "zero".
The word-spacing property can be animatable with the transition property.
Initial Value | normal |
AppliExamplees 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
word-spacing: normal | length | initial | inherit;
Example of the word-spacing property with the "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":
<!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
![CSS word-spacing Property](/uploads/media/default/0001/03/38d7b1e67cf9a99caa0ece41752330acfb6e9804.png)
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. |
Browser support
|
|
|
|
---|---|---|---|
1.0+ | 1.0+ | 1.0+ | 3.5+ |
Practice Your Knowledge
Quiz Time: Test Your Skills!
Ready to challenge what you've learned? Dive into our interactive quizzes for a deeper understanding and a fun way to reinforce your knowledge.