CSS | word-spacing Property

Difficulty Level : Easy
Last Updated : 09 Aug, 2019

It is a CSS property to increases or decreases the white space between words. This property can have only two values, they are normal and length.
Syntax:

word-spacing: normal|length|initial|inherit;

Property values:

Normal: It defines normal space between words which is 0.25em. This is default value.
Example:

<!DOCTYPE html>
<html>
<head>
    <title>
      CSS | word-spacing Property
    </title>
</head>
<body>
    <h1>The word-spacing Property</h1>
  
    <h2>word-spacing: normal:</h2>
    <p style="  word-spacing: normal;
                color:green; 
                font-weight:bold;
                font-size:25px;">
        This is some text. This is some text.
    </p>
</body>
  
</html>

Output:

Length: It defines an additional space between words (in px, pt, cm, em, etc). Negative values are also allowed.
Example:

<!DOCTYPE html>
<html>
<head>
    <title>
      CSS | word-spacing Property
    </title>
</head>
<body>
    <h1>The word-spacing Property</h1>
  
    <h2>word-spacing: length is 20px</h2>
    <p style="  word-spacing:20px;
                color:green; 
                font-weight:bold;
                font-size:25px;">
        GeeksforGeeks - A Computer Science Portal For Geeks!
    </p>
</body>
  
</html>

Output:

Example: Length to Negative Value

<!DOCTYPE html>
<html>
<head>
    <title>
      CSS | word-spacing Property
    </title>
</head>
<body>
    <h1>The word-spacing Property</h1>
  
    <h2>word-spacing: length is -20px</h2>
    <p style="word-spacing:-20px;
              color:green;
              font-weight:bold;
              font-size:25px;">
        GeeksforGeeks - A Computer Science Portal For Geeks!
    </p>
</body>
  
</html>