CSS Word Spacing Property

Posted By Bajarangi soft , Posted On 08-10-2020

Defines the spacing between words of a block of text. default word-spacing: normal; word-spacing: 2em; ... You can use em values: this allows the spacing to remain relative to the font-size.

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:1

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

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

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

Lenht To Native Value.
Example:3

<!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:#ee0937;
            font-weight:bold;
            font-size:25px;">
    Bajarangi- A Computer Portal For Web designers!
</p>
</body>

</html>

Supported browsers: The browsers supported by word-spacing Property are listed below:

- Google Chrome 1.0
- Internet Explorer 6.0
- Firefox 1.0
- Opera 3.5
- Safari 1.0