前面已经介绍了对齐，下面来看如何处理网页设计中字间隔和字母间隔。同样地，这些属性存在一些不太直观的问题。

字间隔

word-spacing属性接受一个正长度值或负长度值。这个长度会增加到字之间的标准间隔。实际上，word-spacing用于修改字间间隔。因此，默认值normal与设置值为0是一样的。

如果提供一个正长度值，那么字之间的间隔就会增加。为word-spacing设置一个负值时，会把字拉近：

p.spread {word-spacing: 0.5em;}

p.tight {word-spacing:-0.5em;}

P.base {word-spacing: normal;}

p.norm {word-spacing: 0;}

<p class="spread">The spaces between words in this paragraph will be increased by 0.5em.</p>

<p class="tight">The spaces between words in this paragraph will be decreased

by 0.5em.</p>

<p class="base">The spaces between words in this paragraph will be normal.</p>

<p class="norm">The spaces between words in this paragraph will be normal.</p>

处理这些设置后的效果如图6-19所示。

图6-19：改变字间间隔

到目前为止，我还没有给出“字”的明确定义。用最简单的网页设计术语来讲，“字”可以是任何非空白符字符组成的串，并由某种空白符包围。这个定义没有实际语义，它只是假设一个文档包含由一个或多个空白符包围的字。支持CSS的用户代理不一定能确定一个给定语言中哪些是合法的字，而哪些不是。尽管这个定义没有多大价值，不过它意味着采用象形文字的语言或非罗马书写体往往无法指定字间隔。利用这个属性，可能会创建很不可读的文档，图6-20清楚地展示了这一点。所以，使用word-spacing时要当心。

字母间隔

word-spacing遇到的许多问题也同样出现在letter-spacing中。这二者之间唯一的真正区别是字母间隔修改的是字符或字母之间的间隔。

像word-spacing属性一样，letter-spacing属性的可取值包括所有长度。默认关键字是normal （这与letter-spacing: 0相同）。输入的长度值会使字母间的间隔增加或减少指定的量。图6-21所示为以下标记的结果：

p {letter-spacing: 0;}/* identical to 'normal'*/

p.spacious {letter-spacing: 0.25em;}

p.tight {letter-spacing:-0.25em;}

<p>The letters in this paragraph are spaced as normal</p>

<p class="spacious">The letters in this paragraph are spread out a bit.</p>

<p class="tight">The letters in this paragraph are a bit smashed together.</p>

图6-21：各种字母间隔

可以使用letter-spacing来突出强调效果，这个技术可谓历史悠久。你可能会写以下声明，其效果如图6-22所示：

strong {letter-spacing: 0.2em;}

<p>This paragraph contains <strong>strongly emphasized text</strong> that is spread out for extra emphasis.</p>

图6-22：使用letter-spacing突出强调效果

间隔和对齐

word-spacing的值可能受text-align属性值的影响。如果一个元素是两端对齐的，字母和字之间的空间可能会调整，以便文本在整行中刚好放下。这可能又会改变网站建设人员用word-spacing声明的字间隔。如果为letter-spacing指定一个长度值，字符间隔则不会受text-align影响，但是如果letter-spacing的值是normal，字符间的间隔就可能改变，以便将文本两端对齐。网页设计师没有指定应当如何计算间隔，所以用户代理只是将其填满。

一般地，一个元素的子元素会继承该元素的计算值，无法为word-spacing或letter- spacing 定义一个可继承的缩放因子来取代计算值（像line-height那样）。因此，可能会遇到图6-23所示的问题：

p {letter-spacing: 0.25em; font-size: 20px;}

small {font-size: 50%;}

<p>This spacious paragraph features <small>tiny text that is just as spacious</small>, even though the author probably wanted the spacing to be in proportion to the size of the text.</p>

图6-23：继承的字母间搞

如果字母间隔与文本大小成比例，得到字母间隔的唯一办法就是显式地设置，如下：

p {letter-spacing: 0.25em;}

small {font-size: 50%; letter-spacing: 0.25em;}

文本转换

默认值none对文本不做任何改动，将使用源文档中原有的大小写，头名思义，uppercase 和 lowercase 将文本转换为全大写或全小写字符。最后，capitalize只对每个单词的首字母大写。图6-24以多种方式展示了这些设置：

h1{text-transform: capitalize;}

strong {text-transform:uppercase;}

p.cummings {text-transform:lowercase;}

p.raw{text-transform:none;}

<h1>The heading-one at the beginninG</h1>

<p>

By default, text is displayed in the capitalization it has in the source cocument,but <strong>it is possible to change this</strong>using the property 'text-transform'.

</p>

<p class="cummings">

For example,one create TEXT such as might have been Written by the late Poet e.e.cumming.

</p>

<p class="raw">

If you feel the need to explicitly Declare the transformation of text to be 'none',that can be done as well.

</p>

不同用户代理可能会用不同的方法来确定单词从哪里开始，相应地确定哪些字母要大写。例如，如图6-24所示，h1元素中的文本“heading-one”网页设计中可以用两种方式显示："Heading-one"或“Heading-One”。CSS并没有说哪一种是正确的，所以这两种都是可以的。

你可能还注意到，图6-24中h1元素的最后一个字母还是大写。这没有错：在应用text- transfom值capitalize时，CSS只要求用户代理确保每个单词的首字母大写，可以忽略单词的余下部分。

作为一个属性，text-transform看上去可能无关紧要，不过如果你突然决定将所有h1 元素都变成大写，这个属性就很有用。不必单独地修改所有h1元素的内容，只需使用text-transform为你完成这个修改：

h1 {text-transform: uppercase;}

<h1>This is an H1 element</h1>

使用text-transform有两方面的好处，首先，只需写一个简单的规则来完成这个修改，而无需修改h1元素本身。其次，如果你以后决定将所有大小写再切换为原来的大小写，可以更容易地完成修改，如图6-25所示：

hi {text-transform: capitalize;}

<h1>This is an H1 element</h1>