word-spacing和letter-spacing的间距问题

为什么word-spacing和letter-spacing同样设置为10px，但是间距不一样？

qq_会眸一笑_04344900 2017-10-06

源自：CSS文本样式 3-13 文本样式其他属性

收起

2回答

长相思兮 2017-10-30 19:37:35

这个问题我也思考了一下，总结如下：

以下都不考虑字符间默认距离

先说word-spacing：word的定义是被空白包围的字符串，字母也好单词也好中文字也好只要之间有空格就会被判定为word.此时word-spacing属性可以生效。比如设置word-cpacing为10px，实际的距离是10px+之前包括空格在内的距离。

再说letter-spacing，它有两种情况：

①连续的字符，此时letter-spacing设置多少，字符之间的距离就是多少。

②带空格的字符，此时空格会被当成一个字母看待，如果设置letter-spacing为10px.实际上两个字符之间的距离10px+空格的宽度+10px.

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
.one{
font-size: 20px;
background-color: pink;
width: 100px;
word-spacing: 10px;
}
.two{
font-size: 20px;
background-color: gray;
width: 100px;
letter-spacing: 10px;
}
.three{
font-size: 20px;
background-color: pink;
width: 100px;
letter-spacing: 26px;
}
</style>
</head>
<body>
<div class="one">a b c</div>

<!-- 带空格的字符，字体为20px时
每个空格宽度大概是6px. 设置了letter-spacing为10px
实际上a和b之间的距离大约是10+6+10--> 
<div class="two">a b c</div>

<!-- 设置letter-spacing为26，与上面的效果差不多 -->
<div class="three">abc</div>
</body>
</html>

收起回答