行内格式化

第6章曾讨论过，网页设计中所有元素都有一个line-height。这个值会显着地影响行内元素如何显示，所以要特别注意。

首先来看如何确定一行的高度。行的高度（或行框的高度）由其组成元素和其他内容（如文本）的高度确定。有一点很重要，line-height实际上只影响行内元素和其他行内内容，而不影响块级元素，至少不会直接影响块级元素。也可以为一个块级元素设置line-height 值，但是这个值只是应用到块级元素的内联内容时才会有视觉影响。例如，考虑以下空段落：

<p style="line-height: 0.25em;"></p>

由于没有内容，这个段落没有任何显示，你什么也看不到。这个段落的line-height可能是某个值（不论是0.25em还是25in），但是如果没有内容，line-height是多少对于创建行框来说都没有任何区别。

当然可以为一个块级元素设置line-height值，并将这个值应用到块中的所有内容，而不论内容是否包含在行内元素中。从某种程度上讲，块级元素中包含的各文本行本身都是行内元素，而不论是否真正用行内元素的标记包围起来。只要你愿意，可以像下面这样写一个虚构的标记序列：

<p>

<line>This is a paragraph with a number of</line>

<line>lines of text which make up the</line>

<line>contents.</line>

</p>

尽管line标记并不真的存在，但是段落表现得就像有这些标记一样，每个文本行从段落继承了样式。因此，网页设计只需为块级元素创建line-height规则，而不必显式地为其所有行内元素（也许只是虚构的行内元素）声明line-height。

虚构的line元素确实可以说明对块级元素设置line-height会有怎样的行为。根据CSS规范，在块级元素上声明line-height会为该块级元素的内容设置一个最小行框高度。因此，声明p.spacious{line-height: 24pt;}意味着每个行框的最小高度为24点。从理论上讲，只有行内元素的内容才会继承这个行高。大多数文本并未包含在行内元素中。因此，如果假装各行包含在虚构的line元素中，这个摸型就能很好地工作。

行内非替换元素

在前面的格式化知识基础上，来讨论如果网页设计行中只包含非替换元素（或匿名文本）将如何构造。了解这一点后，你就能更好地理解行内布局中非替换元素和替换元素之间的区别。

建立框

首先，对于行内非替换元素或匿名文本某一部分，font-size值确定了内容区的高度。如果一个行内元素font-size为15px，则内容区的高度为15像素，因为元素中所有em 框的高度都是15像素，如图7-30所示，

图7-30: em框确定内容区离度

下面再来考虑元素的line-height值，以及它与font-size值之差。如果一个行内非替换元素的font-size为15px, line-height为21px，则相差6像素。用户代理将这6像素一分为二，将其一半分别应用到内容区的顶部和底部，这就得到了行内框。这个过程如图7-31所示。

图7-31：内容区加上行间距就等于行内框

假设有以下标记：

<p style="font-size: 12px; line-height: 12px;">

This is text,<em>some of which is emphasized</em>, plus other text<br> which is <strong style="font-size: 24px;">strongly emphasized</strong> and which is<br>

larget than the surrounding text.

</p>

在这个例子中，大多数文本的font-size都是12px，只有一个行内非替换元素中的文本大小是24px。不过，所有文本的line-height都是12px，因为line-height是一个继承属性。因此，strong元素的line-height也是12px。

所以，对于font-size和line-height都是12px的各部分文本，内容高度没有改变（因为12px和12px之差为0)，因此，行内框的高度为12像素。不过，对于strong文本，line-height和font-size之差是-12px，将其除2来确定半间距（-6px），再把这个半间距分别增加到内容区的顶部和底部，就得到了行内框。由于这里增加的都是负数，所以最后行内框高度为12像素。12像素高的行内框在元素内容区（24像素高）中垂直居中，所以行内框实际上小于内容区。

至止，听上去对网页设计各部分文本所做的都一样，而且所有行内框大小都相等，但并非如此。第二行中的行内框尽管大小相同，但它们排列得并不整齐，因为文本都是按基线对齐的（见图7-32）。

图7-32：行中的行内框

由于行内框确定了整个行框的高度，其相互位置很重要。网页设计中行框定义为行中最高行内框的顶端到最低行内框底端之间的距离，而且各行框的顶端挨着上一行行框的底端。根据图7-32所示的结果，段落将如图7-33所示。

图7-33：段落中的行框

注意：在图7-33中可以看到，中间一行比另外两行要高，不过还是不够大，不能把所有文本都包含在内。匿名文本的行内框确定了行框的底端，strong元素行内框的顶端则设置了行框的顶端。由于行内框的顶端在元素内容区内部，所以元素的内容落在了行框的外面，实际上与其他行框发生了重叠。其结果是，文本行看上去很不规则。本章后面还将介绍一些方法来处理这种行为，另外会介绍一些能得到一致基线间隔的方法。