The difference between letter-spacing and word-spacing_html/css

The difference between letter-spacing and word-spacing_html/css_WEB-ITnose

WBOY

Release： 2016-06-24 11:41:09

Original

1911 people have browsed it

The difference between letter-spacing and word-spacing:
l Although the two attributes in the title are not used frequently, it cannot be said that they have no use. Since they are similar in appearance and function, but also very different, let's briefly introduce them through examples.
Example 1:

<!DOCTYPE html><html><head><meta charset="utf-8"><meta name="author" content="http://www.51texiao.cn/" /><title>蚂蚁部落</title><style type="text/css">.first{  letter-spacing:40px;}.second{  word-spacing:40px;}</style></head><body> <div class="first">I am a good boy</div> <div class="second">I am a good boy</div></body></html>

Copy after login

As can be seen from the above code performance, letter-spacing modifies the spacing between letters or characters, while word-spacing modifies is the spacing between characters (words). In the above code, letter-spacing sets the spacing between letters to 40px. It should be noted that a space is also considered a character. For example, the space between "I" and "am" and the spacing between the letters on both sides will also be set to 40px. , so the space between "I" and "a" is 80px. word-spacing will set the spacing between words to 40px.

Special Note:

Letter-spacing and word-spacing do not exactly set the spacing between letters and words, but add the specified spacing after the specified letters and words, and finally Except for one letter and word.

Example 2:

<!DOCTYPE html><html><head><meta charset="utf-8"><meta name="author" content="http://www.51texiao.cn/" /><title>蚂蚁部落</title><style type="text/css">.first{  letter-spacing:40px;}.second {  word-spacing:40px;}.third{  word-spacing:40px;        }</style></head><body> <div class="first">蚂蚁部落</div> <div class="second">蚂蚁部落</div> <div class="third">蚂 蚁部落</div></body></html>

Copy after login

It can be seen from the performance of the above code that for Chinese characters, if they are connected together, they are regarded as one "word".

The original address is: http://www.51texiao.cn/div_cssjiaocheng/2015/0501/517.html

The most original address is: http://www.softwhy.com/