Heim > Web-Frontend > HTML-Tutorial > letter-spacing与word-spacing的区别_html/css_WEB-ITnose

letter-spacing与word-spacing的区别_html/css_WEB-ITnose

WBOY
Freigeben: 2016-06-24 11:41:09
Original
1918 Leute haben es durchsucht

letter-spacing与word-spacing的区别:
l标题中的两个属性的使用频率虽然算不上多,但是也不能说没有用武之地,它们两个由于在外观和作用上都有相似之处,但是也有很大的不同,下面就通过实例简单介绍一下。
实例一:

<!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>
Nach dem Login kopieren

由以上的代码表现可以看出,letter-spacing修改的是字母或者字符之间的间距,而word-spacing修改的是字(单词)之间的间距。以上代码中letter-spacing将字母之间的间距设置为40px,需要注意的是,空格也算是一个字符,例如"I"与"am"之间的空格与两边的字母的间距也会设置为40px,所以"I"和"a"之间的间距是80px。word-spacing会将单词之间的间距设置为40px。

特别说明:

letter-spacing与word-spacing准确的说不是设置字母和字之间的间距,而是在指定的字母和字之后添加指定的间距,最后一个字母和字除外。

实例二:

<!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>
Nach dem Login kopieren

有以上代码的表现可以看出,对于汉字,如果连在一起则被视作一个“word”。

原文地址是:http://www.51texiao.cn/div_cssjiaocheng/2015/0501/517.html

最为原始地址是:http://www.softwhy.com/

Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage