We often have challenges with spacing when using CSS fonts. The default space between words in these fonts may be dissatisfying, and this is the basic reason we have the CSS <code>word-spacing</code> property.

The **CSS <code>word-spacing</code> property** declares the length of space between words and between tags.

#     
## Syntax

All CSS properties have the syntax:

    property: values;
which is also the case for the <code>word-spacing</code> property.

Meanwhile, the <code>word-spacing</code> property values can be declared in four different ways, which are:

- Using the *keyword* value.
- Using *length* values.
- Using the *percentage* values.
- Using the *global* values.


#    
## Values

### 1. Keyword value 

           syntax:
            word-spacing: normal;
The **keyword value** sets the space between words or tags to the predefined length set by the current font and/or the browser.


### 2. Length values

         syntax
            word-spacing: 5px;
            word-spacing: 0.3em;
The **length values** add extra spacing to the default space defined by the font.

### 3. Percentage values

         syntax
            word-spacing: 10%;
The **percentage values** add extra space as a percentage of the affected character’s advanced width.

### 4. Global values 

The **global values** include:

      word-spacing: inherit;
      word-spacing: initial;
      word-spacing: revert;
      word-spacing: unset;

**<code>inherit</code>**: This sets the text to use the value of the parent element.

**<code>initial</code>**: This sets the text to get the default value of the font used.

**<code>revert</code>**: This reverts the value of the property from its current value to the value it would have if this value hadn’t been specified. It sets the value to default or inherits.

**<code>unset</code>**: This acts as either <code>inherit</code> or <code>initial</code>. It will act as <code>inherit</code> if the parent has a value that matches; otherwise, it will act as <code>initial</code>.

> Note: Global values work the same way for every property that uses them.


<html>
 <head>
 </head>
 <body>
   <h1>Examples</code>
   <hr>
   <div id="keyword-value">This text here uses the <strong>keyword</strong> <code>word-spacing</code> value</div>
   <br><br>
   <div id="length-value">This text here uses the <stong>length</stong> <code>word-spacing</code> value</div>
    <br><br>
   <div id="percentage-value">This text here uses the <strong>percnetage</strong> <code>word-spacing</code> value</div>
    <br><br>
   <div id="global-value">This text here uses the <strong>global</strong> <code>word-spacing</code> value</div>
    <br><br>
 </body>
</html>

h1{
    text-align: center;
    font-size: 30px;
}
#keyword-value{
    word-spacing: normal;
}
#length-value{
    word-spacing: 10px;
    color: lawngreen;
}
#percentage-value{
    word-spacing: 10%;
    color: cyan;
}
#global-value{
    word-spacing: inherit;
    color: lightcoral;
}


codemirror

Each <code>div</code> is given an <code>id</code> which corresponds to the <code>word-spacing</code> declared value in the CSS.

Study the example above for better understanding.

What is the CSS word-spacing property?

The CSS word-spacing property controls spacing between words/tags using keyword, length, percentage, or global values for better text formatting.