HOLLA TECH - LEARN

The letter-spacing Property
 

The letter-spacing property specifies the space between characters in a text. The values can be set as:
normal defines the default style with no extra space between characters
length defines an extra space between characters using measurement units like px, pt, cm, mm, etc.;
inherit inherits the property from its parent element;

The HTML:

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

 

The CSS: 

p.normal {
   letter-spacing: normal;
}
p.positive {
   letter-spacing: 4px;
}

 

Result: 

Holla Tech - Learn CSS


Using Negative Values
 

For defining an extra space between characters, negative values are also permitted.
Here is an example demonstrating the difference between positive and negative values:

The HTML:

<p class=“positive”>This paragraph is letter-spaced at 4px.</p>
<p class=“negative”>This paragraph is letter-spaced at -1.5px</p>

 

The CSS: 

p.positive {
   letter-spacing: 4px;
}
p.negative {
   letter-spacing: 1.5px;
}

 

Result: 

Holla Tech - Learn CSS

NOTE!
Always test your result, to ensure the text is readable.

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