Managing Spacing Between Words with CSS

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;


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
See also  Facebook-like Content Loader For Modern Web - mocka

Leave a Reply

Your email address will not be published. Required fields are marked *