letter-spacing与word-spacing的区别

王朝学院·作者佚名  2016-05-23
窄屏简体版  字體: |||超大  

letter-spacing与Word-spacing的区别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>

由以上的代码表现可以看出,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>

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

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

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

 
 
 
免责声明:本文为网络用户发布,其观点仅代表作者个人观点,与本站无关,本站仅提供信息存储服务。文中陈述内容未经本站证实,其真实性、完整性、及时性本站不作任何保证或承诺,请读者仅作参考,并请自行核实相关内容。
 
 
© 2005- 王朝網路 版權所有 導航