Grow your CSS skills. Land your dream job.

word-spacing

Last updated on:

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:

Check out this Pen!

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.

Other Resources

Browser Support

Chrome Safari Firefox Opera IE Android iOS
Works Works Works Works Works Most Works

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.

Comments

  1. I’m noticing a problem with attempting to center a headline with word-spacing.

    text-align: center;
    padding: 1em 0;
    margin: .5em auto 0;
     width: 100%;
    word-spacing: 5em;
    

    In FF, this behaves as expected: literal centering with a large gap between words. In Chrome, it appears to apply the spacing to the front of the first word, forcing the text to push out the right side of the box. In Safari, it appears to ignore text-align: center completely.

    All screenshots from current browser versions on OS X (10.8.4). Is there a work-around for this inconsistency or do I have to settle for fixing this with manual spacing?

    screen capture windows

  2. Pascal Lorenz

    Setting word-spacing to zero to remove the space between inline-block elements did not have any effect for me. Any other value than zero worked. So I tried to find out which negative em value I needed to use.

    Looks like -0.25em removes the standard whitespace between blocks.

  3. Arioman
    Permalink to comment#

    cool thanks , but is there any chance to increase space between letters , not word ?

Leave a Comment

Posting Code

  • Use Markdown, and it will escape the code for you, like `<div class="cool">`.
  • Use triple-backticks for blocks of code.
    ``` 
    <div>
      <h1>multi-line block of code</h1>
      <span>be cool yo.</span>
    </div>
    ```
  • Otherwise, escape your code, like <code>&lt;div class="cool"&gt;</code>. Markdown is just easier though.

Current ye@r *

*May or may not contain any actual "CSS" or "Tricks".