# CSS word-spacing

June 11, 2017 357

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.

CSS

word-spacing: value;


## Values

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.

## Example

Following is an example of word spacing.

#### HTML

<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>


#### CSS

#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
0 COMMENT