Skip to content
Related Articles

Related Articles

CSS | word-spacing Property

Improve Article
Save Article
  • Difficulty Level : Easy
  • Last Updated : 04 Aug, 2022
Improve Article
Save Article

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:

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

Example: 

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:

 

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

Example: 

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: Length to Negative Value 

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:

 

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

  • Google Chrome 1.0
  • Edge 12.0
  • Internet Explorer 6.0
  • Firefox 1.0
  • Opera 3.5
  • Safari 1.0

My Personal Notes arrow_drop_up
Related Articles

Start Your Coding Journey Now!