CSS letter-spacing between characters

 The function of the CSS letter-spacing property can be used to set the white space between the horizontal direction of the text. The property value of letter-spacing can be positive or negative. When the parameter value of letter-spacing is greater than 0, the distance between the text levels will be Increase, when the parameter value of letter-spacing is less than 0, the distance between text levels will be reduced, and overlap may even occur. As for what value will overlap the text, it depends on the font used ( The combination of font-family and font-size .

CSS letter-spacing property basic syntax

letter-spacing: distance value;

The distance value of the CSS letter-spacing property can use common common units such as em, cm, px, etc., and the effect of letter-spacing can be applied to the entire web page or other web page elements, such as DIV block, span area, form the textarea text input fields, HTML form fields ... and so on, wide range of applications.

There are three parameter modes for the distance value of CSS letter-spacing, which are normal, distance, and inherit, as explained below.

• letter-spacing:normal; //The default value, the distance between characters is the standard value
  
• letter-spacing: length; //Customize the distance between text
  
• letter-spacing:inherit;//The letter-spacing attribute value inherited from the parent layer
  

The third item inherit is not supported by some browsers, so it is recommended not to use it.

CSS letter-spacing example

<div style="letter-spacing:-2px;">This is an example of testing the distance between texts</div>
<div style="letter-spacing:0px;">This is an example of testing the distance between texts</div >
<div style="letter-spacing:normal;">This is an example of testing the distance between texts</div>
<div style="letter-spacing:10px;">This is an example of testing the distance between texts</div >

The results are presented as

This is an example of testing the distance between text

This is an example of testing the distance between text

This is an example of testing the distance between text

This is an example of testing the distance between text

The example provides a total of four different letter-spacing effects. From the first DIV block, the text distance is set to -2, you can see that the text has the effect of sticking together or even a small part of overlap. The second DIV zone The block and the third DIV block are equal to no special effect, because the default effect of letter-spacing is 0px or normal, the fourth DIV block has a very obvious difference, the distance between the text is 10px, and the entire line of text The occupied horizontal space is also automatically increased, which is the function of the letter-spacing property.