word-spacing

The word-spacing property is similar to letter-spacing, though naturally its use governs the amount of space between the words in a piece of text, not the individual characters.

p {
    word-spacing: 2em;
}

word-spacing can receive three different values:

1. the “normal” keyword, which resets the default spacing
2. length values using any CSS units (most commonly px, em, rem)
3. the “inherit” keyword, which applies the word-spacing of the parent element

Best practice at this time would be to use em. Font size can be adjusted, so using pixels for this could cause problems at the spacing between words wouldn’t scale as their size did. rem is great usually, but browser support is lower and in this use case it’s probably best the spacing is relevant directly to the words it is being applied to, not the root.

It is important to note that “word” in this context actually refers a singular piece of inline content—which means that word-spacing affects inline-block elements as well as inline elements. In this example, several such elements are spaced by setting the word-spacing of their parent container:

<div class="wrap">
  <div class="module"></div>
  <div class="module"></div>
  <div class="module"></div>
  <div class="module"></div>
</div>

.wrap {
  word-spacing: 1em;
  padding: 1em 0 0;
}
.module {
  background: lightsteelblue;
  height: 5em;
  width: 5em;
  display: inline-block;
  /* reset word-spacing so that text inside this box is spaced normally */
  word-spacing: normal;
}

Points of Interest

• The word-spacing property is animatable with CSS Transitions.
• While use of the “percentage” value to determine spacing is permitted as per the spec, it can yield unpredictable results — often simply no effect at all.
• Setting white-space to zero is one of the ways to fight against the space between inline block elements.

Browser Support

A note on Android browser support: The vast majority of Android devices support word-spacing—however, some devices using non-Apple builds of Webkit or the Netfront browser do not. The specifics are detailed in the QuirksMode link above.