The word-spacing Property

Updated: Nov 10, 2009

The word-spacing property is used to modify the width of certain whitespace characters. Therefore, it modifies the distance between the words (or images) in an element. In CSS, a word is considered to be a one or more (non-whitespace) glyphs with whitespace surrounding it. The word-spacing property does not specify the width of whitespace characters, it only specifies the amount of space to be added or removed from the default width.

The word-spacing property can be applied to any element. It can take length values and the keywords normal and inherit. It is an inherited property. The initial values is normal. A length of 0 is equivalent to normal. Negative values are allowed; they reduce the space between the words.

Note: The word-spacing property does not take percentage values

The width of the space character depends on the font family and font size.

The word-spacing property affects each space (U+0020), non-breaking space (U+00A0), and ideographic space (U+3000) left in the text after the white space processing rules have been applied. Source: http://www.w3.org/TR/CSS21/text.html#spacing-props

According to the specification, therefore, other white space characters such as  ,  , and   are not affected by the word-spacing property. However, Internet Explorer 6 and Internet Explorer 7, modify the word spacing of these characters also. This is a bug. Firefox 3 and Firefox 3.5 do not modify the width of the non-breaking space character  . This is a bug.

Note: Since the word-spacing property affects the width of certain whitespace characters, it not only affects the spacing of words, but also the space between images that are separated by those whitespace characters.

word-spacing with px values

The number of px declared in the word-spacing declaration is added to the normal width of the space character.

Example 1: <p style="font-family:'Times New Roman';font-size: 35px;word-spacing: 10px">the <span>quick</span> <span>brown</span></p>

In the above example, the default width of the space character is 9px. Therefore, the default space between words is 9px. However, since the word spacing is declared as 10px, 10px is added to the default spacing which results in word spacing of 19px.

Example 2: <p style="font-family:'Times New Roman';font-size: 35px;word-spacing: -20px">the <span>five quick</span> <span>boxing</span> wizards</p>

In the above example, the word-spacing value is negative. Since the default width of the space character is 9px, the final word spacing is 9px -20px = -11px. Therefore, the beginning and ends of words will overlap each other.

Firefox 3 and Firefox 3.5 do not reduce the word spacing between two inline elements (e.g. spans) to less than zero. This is a bug. Internet Explorer 8 does not reduce the word spacing to less than zero. This is a bug.

word-spacing with em values

When word spacing is declared in em, the em value is multiplied with the font-size to give the number of pixels that is added to the width of the space character in the element.

Example 2: <p style="font-family:'Times New Roman';font-size: 35px;word-spacing: 1.5em">the <span>fox</span> <span>on</span></p>

In the above example, the declared em value (1.5em) is multiplied with the font-size to give 52.5px (1.5 * 35). This is added to the width of the space character to give 61.5px which rounds off to 62px. However, Firefox 3 and Firefox 3.5, due to a rounding off error, increase the word spacing to only 61px. Internet Explorer 8 increases the word spacing to 62px. Internet Explorer 6 and Internet Explorer 7 increases the word spacing to only 33px. This is a bug.

word-spacing:normal restores the word spacing to the default width of the space character. Since word-spacing is an inherited property, the normal keyword can be used to restore the default word spacing in an element that has inherited a modified word spacing declaration.

word-spacing:inherit

word-spacing:inherit is used to override another word-spacing declaration that has been applied to an element, and to restore the default behavior of inheriting the parent element's word spacing.

Internet Explorer 6 and Internet Explorer 7 do not support word-spacing:inherit, they ignore it.

Conclusion

For consistent results in all browsers, word-spacing with em values should be avoided (Internet Explorer 6 and Internet Explorer 7 calculate them incorrectly).

word-spacing:inherit should also be avoided because Internet Explorer 6 and Internet Explorer 7 do not support it.

word-spacing declarations that result in negative word spacing should be avoided because they are not supported by Internet Explorer 8. Also, in Firefox 3 and Firefox 3.5, if an element with negative word spacing contains child inline elements, the word spacing between them is not reduced to less than zero. This is a bug.

Using the word-spacing declaration on elements that contain the character entities  ,  ,  , and   is not recommended because of bugs in Internet Explorer 6, Internet Explorer 7, Firefox 3 and Firefox 3.5 (as mentioned earlier).

Apart from the exceptions mentioned above, word-spacing declarations in px that result in positive word spacing are supported in all browsers and is therefore the recommended way of using the property.