CSS Reference Property

word-spacing 616923

The word-spacing property specifies the spacing behavior between individual words. 5a701q

It is used to increase or decrease the amount of space between individual words in a piece of text. The value specified will be added to the default space between these words.

Notes and Trivia: 1x422

The word-spacing property can be used on any kind of inline content. The term “word” refers to any inline (or inline-block) element inside an element. So the word-spacing property can be used to set or remove the spacing between elements such as a list of images inside an element.

The word-spacing property is listed as an animatable property in the CSS Transitions spec. That is, you can use CSS Transitions to change its value from one value to another.

Official Syntax 2f2j3w

  • Syntax:

    word-spacing: normal | <length> | inherit
  • Initial: normal
  • Applies To: all elements
  • Animatable: yes

Values 445h6m

normal
The normal inter-word space, as defined by the current font and/or the browser.
<length>
This value indicates inter-word space in addition to the default space between words. Values may be negative, but there may be implementation-specific limits. See <length> value for a list of possible values and units.
inherit
The property takes the same specified value as the property for the element’s parent.

Notes 6p2z1x

Word spacing algorithms may differ among browsers. Word spacing is also influenced by line justification (see white-space property).

It is considered best practice to use relative units to set the value of this property. If an absolute value is used, the spacing between words won’t scale as the text size scales, so you may end up with very big text with very small word spacing, or very small text with huge word spacing. em is preferred, as rem has low browser , and because the space between words is best specified relative to the words themselves, not the root element.

Examples 5w70f

The following rule increases the space between each word in the H1 element by 1em:

h1 {
    word-spacing: 1em;
}

Browser 51c73

Works in Chrome, Safari, Firefox, IE6+ and Opera, iOS and Android.

Notes 6p2z1x

More details on mobile is available in the mobile compatibility table on QuirksMode.

Further Reading 375l1b

Written by

Last updated June 3, 2020 at 12:35 pm by Pedro Botelho

Do you have a suggestion, question or want to contribute? Submit an issue.