/* Keyword value */ word-spacing: normal;  /* <length> values */ word-spacing: 3px; word-spacing: 0.3em;  /* <percentage> values */ word-spacing: 50%; word-spacing: 200%;  /* Global values */ word-spacing: inherit; word-spacing: initial; word-spacing: revert; word-spacing: unset; 

word-spacing

The word-spacing CSS property sets the length of space between words and between tags.

Syntax

/* Keyword value */ word-spacing: normal;  /* <length> values */ word-spacing: 3px; word-spacing: 0.3em;  /* <percentage> values */ word-spacing: 50%; word-spacing: 200%;  /* Global values */ word-spacing: inherit; word-spacing: initial; word-spacing: revert; word-spacing: unset; 

Values

The normal inter-word spacing, as defined by the current font and/or the browser.

Specifies extra spacing in addition to the intrinsic inter-word spacing defined by the font.

Specifies extra spacing as a percentage of the affected character's advance width.

Examples

HTML

<div id="mozdiv1">Here are many words...</div> <div id="mozdiv2">...and many more!</div> 

CSS

#mozdiv1 {   word-spacing: 15px; }  #mozdiv2 {   word-spacing: 5em; } 

Accessibility concerns

A large positive or negative word-spacing value will make the sentences the styling is applied to unreadable. For text styled with a very large positive value, the words will be so far apart that it will no longer appear to be a sentence. For text styled with a large negative value, the words will overlap each other to the point where the beginning and end of each word is unrecognizable.

Legible word-spacing must be determined on a case-by-case basis, as different font families have different character widths. There is no one value that can ensure all font families automatically maintain their legibility.

Formal definition

Formal syntax

normal | <length>

Specifications

See also