CSS word-spacing

The CSS word-spacing property is used to define the length/size of white spaces between words. For example:

HTML with CSS Code
<!DOCTYPE html>
<html>
<head>
   <style>
      .a{word-spacing: normal;}
      .b{word-spacing: 4px;}
      .c{word-spacing: 1.2rem;}
      .d{word-spacing: -4px;}
      .e{word-spacing: 6px;}
   </style>
</head>
<body>
   
   <h2>word-spacing: normal</h2>
   <p class="a">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>

   <h2>word-spacing: 4px</h2>
   <p class="b">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>

   <h2>word-spacing: 1.2rem</h2>
   <p class="c">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>

   <h2>word-spacing: -4px</h2>
   <p class="d">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>

   <h2>word-spacing: 6px</h2>
   <p class="e">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>

</body>
</html>
Output

word-spacing: normal

Lorem ipsum dolor sit amet, consectetur adipisicing elit.

word-spacing: 4px

Lorem ipsum dolor sit amet, consectetur adipisicing elit.

word-spacing: 1.2rem

Lorem ipsum dolor sit amet, consectetur adipisicing elit.

word-spacing: -4px

Lorem ipsum dolor sit amet, consectetur adipisicing elit.

word-spacing: 6px

Lorem ipsum dolor sit amet, consectetur adipisicing elit.

CSS word-spacing Syntax

The syntax of word-spacing property in CSS, is:

word-spacing: x;

The value of x should be any of the following:

CSS Online Test


« Previous Tutorial Next Tutorial »


Liked this post? Share it!