totn CSS

CSS: word-spacing property

This CSS tutorial explains how to use the CSS property called word-spacing with syntax and examples.

Description

The CSS word-spacing property defines the amount of space between words.

Syntax

The syntax for the word-spacing CSS property is:

word-spacing: value;

Parameters or Arguments

value

The amount of extra space to display between words (in addition to the standard spacing for the font). It can be one of the following:

Value Description
fixed Fixed value expressed in px, em, ...
p { word-spacing: 0.5em; }
normal Normal spacing based on the chosen font
p { word-spacing: normal; }

Note

  • If the word-spacing property is expressed as a fixed value, it can be either a positive or negative value.
    • A positive value would add additional space between words (in addition to standard spacing for the font).
    • A negative value would remove space between words.
  • If the word-spacing property is set to normal, the selected font would determine the space between words.

Browser Compatibility

The CSS word-spacing property has basic support with the following browsers:

  • Chrome
  • Firefox (Gecko)
  • Internet Explorer 6+ (IE 6+)
  • Opera
  • Safari (WebKit)

Example

We will discuss the word-spacing property below, exploring examples of how to use this property in CSS.

Positive Fixed Value

Let's look at an example where we set additional space between words using the word-spacing property with a positive fixed value.

The CSS would look like this:

p { word-spacing: 5px; }

The HTML would look like this:

<div>
  <p>This paragraph was written by techonthenet.com.</p>
</div>

The result would look like this:

CSS

In this CSS word-spacing example, we have set 5px of additional space between the words in the <p> tag. The additional space is over and above the spacing that is determined by the selected font.

Negative Fixed Value

Let's take a look at what would happen if we applied a negative value to the word-spacing property.

The CSS would look like this:

p { word-spacing: -3px; }

The HTML would look like this:

<div>
  <p>This paragraph was written by techonthenet.com.</p>
</div>

The result would look like this:

CSS

In this CSS word-spacing example, we have removed 3px of space between the words by setting a -3px value for the word-spacing property. This removes some of the word spacing that has been added by the selected font.

Normal

Finally, let's look at what this text would look like if we set the word-spacing property to normal (or the default, if the word-spacing property is not set).

The CSS would look like this:

p { word-spacing: normal; }

The HTML would look like this:

<div>
  <p>This paragraph was written by techonthenet.com.</p>
</div>

The result would look like this:

CSS

In this CSS word-spacing example, we have set the word-spacing property to normal which means that the spacing between words is determined by the chosen font.