CSS `word-spacing`: Controlling Horizontal Space Between Words

Learn how to adjust the spacing between words in your text using the CSS `word-spacing` property. This tutorial explains how to use various units (e.g., pixels, ems) and keywords (`normal`) to fine-tune word spacing, enhancing readability and visual appeal in your web designs.

Adjusting Word Spacing with CSS `word-spacing`

Understanding `word-spacing`

The CSS `word-spacing` property controls the horizontal space between words in a block of text. It's similar to `letter-spacing`, which controls spacing between individual letters, but `word-spacing` works at the word level.

Using very large positive or negative values for `word-spacing` can make text unreadable; positive values spread words apart excessively, and negative values can cause words to overlap.

`word-spacing` Property Syntax

The syntax is:

word-spacing: normal | | initial | inherit;

`word-spacing` Property Values

• normal (default): Uses the browser's default spacing (typically around 0.25em).
• : Specifies additional spacing using length units (e.g., `10px`, `2em`, `1cm`). Positive values increase spacing, and negative values decrease spacing.
• initial: Resets the property to its default value (normal).
• inherit: Inherits the value from its parent element.

Examples of `word-spacing`

These examples show how to adjust word spacing using different values. The differences in spacing would become more apparent with longer lines of text.

Example 1: `normal` and `length` (positive)

p { word-spacing: normal; } /* Default spacing */
p { word-spacing: 40px; }  /* Increased spacing */

Example 2: `length` (negative and initial)

p { word-spacing: 2cm; } /* Increased spacing */
p { word-spacing: -50px; } /* Decreased spacing (words may overlap) */
p { word-spacing: initial; } /* Resets to default */