CSS word-spacing Property

Last Updated : 29 Aug, 2024

The word-spacing property adjusts the white space between words, increasing or decreasing. This CSS property can be set to normal or a specific length (positive or negative), improving readability and text formatting.

Syntax

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

Property values

Normal

Defines the default space between words, which is 0.25em. This is the default value.

Example: In this example we demonstrates the word-spacing CSS property, setting text to normal spacing, styled in green, bold, and a font size of 25px.

html

<!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: In this example we sets word-spacing to 20px in a paragraph, styled in green, bold, and 25px font. Demonstrates the CSS word-spacing property for text spacing adjustment.

html

<!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: In this example we demonstrating the word-spacing property with a negative value of -20px, adjusting the space between words in a paragraph for emphasis and style.

html

<!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>