Managing Spacing Between Words with CSS word-spacing Property

css
Published on March 5, 2019

The CSS word-spacing property defines the width of white space between words in a block of text. Values can be :

  • normal : The normal spacing as defined by the font or the browser

    word-spacing: normal;

  • <length> : Specify extra spacing, given in CSS length units — px, em, pt etc

    word-spacing: 5px;
    word-spacing: 1.5em;

    When specified as a length, the width of the white space specified is in addition to the default value defined by the font or the browser.

    So specifying word-spacing: 2px would mean :
    word spacing = 2px + default word spacing (defined by browser)

  • inherit : Inherit word spacing from the parent element

    word-spacing: inherit;

Example

Words will be spaced 10px in this sentence.
.space-words {
    word-spacing: 10px;
}

<div class="space-words">Words will be spaced 10px in this sentence.</div>

Other Things to Note

  • You can use negative values to decrease word spacing
  • word-spacing is animatable — you can use this property in your CSS animations
In this Tutorial