word-spacing

Avatar of Sara Cope
Sara Cope on (Updated on )

DigitalOcean joining forces with CSS-Tricks! Special welcome offer: get $100 of free credit.

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.

.element {
  word-spacing: .75em;
}

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:

Worth noting…

  • 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

Other resources