HOLLA TECH - LEARN 

 
The word-spacing Property
 

The word-spacing property specifies the space between words in a text. Just like the letter-spacing property, you can set the word-spacing values as normal, length, and inherit.

The HTML:

<p class=“normal”>This paragraph has no additional word-spacing applied.</p>
<p class=“px”>This paragraph is word-spaced at 30px.</p>

 

The CSS: 

p.normal {
   word-spacing: normal;
}
p.px {
   word-spacing: 30px;
}

 

Result: 

Holla Tech - Learn CSS

NOTE!
When a weird spacing is used, and it is necessary to keep the selected paragraph with normal word spacing, the normal option is usually used.

Measurement Units
 

To define an extra space between words, you can use positive measurement values like px, pt, pc, cm, mm, inches, em, and ex.
Negative values are also permitted. Here is an example to show the difference.

The HTML:

<p class=“positive”>This paragraph is word-spaced at 20px.</p>
<p class=“negative”>This paragraph is word-spaced at -5px.</p>

 

The CSS: 

p.positive {
  word-spacing: 20px;
}
p.negative {
   word-spacing: 5px;
}

 

Result: 

Holla Tech - Learn CSS

NOTE!
Copy and paste the codes in a text editor to play with the outputs.

BACK NEXT

CLICK ON THE BUTTON BELOW TO GO TO THE CSS MAIN COURSE PAGE. 

CSS MAIN COURSE PAGE

 


© License: All Rights Reserved 


CONTACT HOLLA TECH – LEARN SUPPORT