<pre class="brush: css notranslate"><code><span class="token comment">/ Keyword value /</span> <span class="token property">word-spacing</span><span class="token punctuation">:</span> normal<span class="token punctuation">;</span> <span class="token comment">/ &lt;length&gt; values /</span> <span class="token property">word-spacing</span><span class="token punctuation">:</span> 3px<span class="token punctuation">;</span> <span class="token property">word-spacing</span><span class="token punctuation">:</span> 0.3em<span class="token punctuation">;</span> <span class="token comment">/ &lt;percentage&gt; values /</span> <span class="token property">word-spacing</span><span class="token punctuation">:</span> 50%<span class="token punctuation">;</span> <span class="token property">word-spacing</span><span class="token punctuation">:</span> 200%<span class="token punctuation">;</span> <span class="token comment">/ Global values /</span> <span class="token property">word-spacing</span><span class="token punctuation">:</span> inherit<span class="token punctuation">;</span> <span class="token property">word-spacing</span><span class="token punctuation">:</span> initial<span class="token punctuation">;</span> <span class="token property">word-spacing</span><span class="token punctuation">:</span> revert<span class="token punctuation">;</span> <span class="token property">word-spacing</span><span class="token punctuation">:</span> unset<span class="token punctuation">;</span> </code></pre>

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