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:

  • normal - used to apply the normal white space between words. This is the default value
  • length - We can define custom sized white space like 12px, -4px, or 1.3rem etc. between words
  • initial - used to use the default value
  • inherit - used to use the value inherited by the parent element

CSS Online Test


« Previous Tutorial Next Tutorial »