Add or subtract space between the words of a sentence with CSS

The word-spacing property is used to add or subtract space between the words of a sentence. Possible values are normal or a number specifying space.

Syntax

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

Parameters

Value Description
normal Default spacing between words
length Specific spacing (px, em, rem, etc.)
initial Sets to default value
inherit Inherits from parent element

Example: Increasing Word Spacing

You can try to run the following code to implement word-spacing property with increased spacing.

<html>
   <head>
      <style>
         .normal-spacing {
            word-spacing: normal;
         }
         .wide-spacing {
            word-spacing: 8px;
         }
         .extra-wide {
            word-spacing: 15px;
         }
      </style>
   </head>
   <body>
      <p class="normal-spacing">
         Asia is a continent with normal spacing.
      </p>
      <p class="wide-spacing">
         Asia is a continent with 8px spacing.
      </p>
      <p class="extra-wide">
         Asia is a continent with 15px spacing.
      </p>
   </body>
</html>

Example: Decreasing Word Spacing

You can also use negative values to reduce space between words.

<html>
   <head>
      <style>
         .tight-spacing {
            word-spacing: -2px;
         }
         .very-tight {
            word-spacing: -5px;
         }
      </style>
   </head>
   <body>
      <p class="tight-spacing">
         This text has reduced word spacing of -2px.
      </p>
      <p class="very-tight">
         This text has very tight spacing of -5px.
      </p>
   </body>
</html>

Common Use Cases

  • Headers: Increase spacing for dramatic effect
  • Justified text: Fine-tune spacing for better alignment
  • Design elements: Create specific visual effects
  • Responsive design: Adjust spacing for different screen sizes

Conclusion

The word-spacing property provides precise control over spacing between words. Use positive values to increase spacing and negative values to decrease it for better typography control.

Updated on: 2026-03-15T23:18:59+05:30

457 Views

Kickstart Your Career

Get certified by completing the course

Get Started
Advertisements