letter-spacing与word-spacing的区别-学到老web开发

letter-spacing与word-spacing的区别

发表于:2015-07-15 15:50:31 | 898次阅读| 作者:html,css

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

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

01<!DOCTYPE html>
02<html>
03<head>
04<meta charset="utf-8">
05<meta name="author" content="http://www.51texiao.cn/" />
06<title>蚂蚁部落</title>
07<style type="text/css">
08.first{
09  letter-spacing:40px;
10}
11.second{
12  word-spacing:40px;
13}
14</style>
15</head>
16<body>
17 <div class="first">I am a good boy</div>
18 <div class="second">I am a good boy</div>
19</body>
20</html>

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

特别说明:

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

实例二:

01<!DOCTYPE html>
02<html>
03<head>
04<meta charset="utf-8">
05<meta name="author" content="http://www.51texiao.cn/" />
06<title>蚂蚁部落</title>
07<style type="text/css">
08.first{
09  letter-spacing:40px;
10}
11.second {
12  word-spacing:40px;
13}
14.third{
15  word-spacing:40px;        
16}
17</style>
18</head>
19<body>
20 <div class="first">蚂蚁部落</div>
21 <div class="second">蚂蚁部落</div>
22 <div class="third">蚂 蚁部落</div>
23</body>
24</html>

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

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