CSS 单词间距 word-spacing属性

word-spacing属性用来增加或减少单词之间的距离，默认值为0。该属性接受一个正的长度值或负的长度值；设置一个正的长度值时，单词之间的间隔会增加；设置一个负的长度值时，单词之间的间隔会减少，让单词挤得更紧，甚至出现重叠。

因为该属性把由空白符包围的一个字符串看作一个单词，而汉字之间没有空格，所以该属性对中文无效。但是，如果在汉字中人为添加空格，则会把空格前后的汉字按单词处理，该属性会生效。

在上一节字符间距的例子中，整个古诗被设置为在容器中居中显示。细心的读者可能已经发现，h1 标题和 h2 标题的中线，并没有完全对齐。

没有对齐的原因，跟我们的实现方式有关，因为使用 letter-spacing 属性让标题稀疏明朗，而 letter-spacing 属性则是通过在每个字符的后面插入指定的空间，来调整字符间距的。所以，h1 标题的最后一个字符‘思’的后面被插入了一个 10px 的空间，而 h2 标题并未插入任何内容，其结果就导致 h1 标题和 h2 标题的中线不能完全对齐。

要解决这个问题，可以人为在 h1 标题的汉字之间插入一个空格，再通过 word-spacing 属性来调整单词间距，让 h1 标题完美居中。如：

在 h1 标题的汉字之间插入空格后，运行结果如图 3?19 所示：

从上图可以看出，经过调整后，h1 标题和 h2 标题的中线已经完全对齐。这个问题，本身是一个细小的问题，常常被设计师所忽视。

然而，在一个严谨的设计师眼里，往往没有小问题，所有问题都是大问题。并且，对于任何问题，都会刨根问底，找到问题背后的根源。因为只有这样，才能彻底解决问题。

歪脖先生，十五年以上软件开发经验，酷爱Web开发，精通 HTML、CSS、JavaScript、jQuery、JSON、Python、Less、Bootstrap等，著有《HTML宝典》、《揭秘CSS》、《Less简明教程》、《JSON教程》、《Bootstrap2用户指南》、《Bootstrap3实用教程》，并全部在 GitHub 上开源。