BlogsDope image BlogsDope

CSS word-spacing

June 11, 2017 HTML CSS 422

The word-spacing property adjusts the distance between words. You can either increase or decrease the white space between the words of any element using this property.


word-spacing: value;


normal : This is the default value and sets the normal spacing of 0.25em (with no extra spacing).

<length> : It is the amount of extra space (in px, em, etc), in addition to the normal spacing. A positive value adds additional space while a negative value reduces space between words.

initial : Sets the property to the default value.

inherit : Inherits the value from parent element.


Following is an example of word spacing.


<p id="wspacing">This text has default word spacing</p>
<p id="wspacing1">This text has extra word spacing</p>
<p id="wspacing2">This text has reduced word spacing</p>


#wspacing {
  word-spacing: normal;

#wspacing1 {
  word-spacing: 4px;

#wspacing2 {
  word-spacing: -4px;

See the Pen Word Spacing by Aakhya Singh (@aakhya) on CodePen.

Browser Support

This property is supported by all browsers.

Liked the post?
Inquisitive and passionate Front-end Developer and Web Designer and Co-Founder of CodesDope.
Editor's Picks

Please login to view or add comment(s).