行内替换元素

一般认为网页设计行内替换元素有固有的高度和宽度，例如，一个图像的高度和宽度可能是某个像素数。因此，有固有高度的替换元素可能导致行框比正常要高。这不会改变行中任何元素的line-height值，包括替换元素本身。相反，只是会让行框的高度恰好能包含替换元素（以及所有框属性）。换句话说，会用替换元素整体（包括内容、外边距、边距和内边距）来定义元素的行内框。以下样式就能得到这样一个例子。

字形与内容区

你可能会尽力避免行内非替换元素的背景重叠，尽管如此，这种情况还是可能发生，这取决于使用何种字体。问题在于一个字体的em框与其字符字形之间可能存在差别。可以看到，对于大多数字体，其em框的高度与字符字形的高度都不一致。

这听上去可能很抽象，不过有很实际的后果。网站建设CSS2.1中指出：“内容区的高度应当基于字体，但是这个规范并没有指定如何基于字体确定内容区的高度。用户代理可能……使用em框，也可能使用字体的最大上升变形和下降变形（如果使用字体的最大上升变形和下降变形，能确保字形中落在em框上面或下面的部分仍在内容区内，但是这样一来，不同的字体会有不同大小的框）。”

换句话说，一个行内非替换元素的“绘制区”要由用户代理来决定。如果一个用户代理使em框的高度作为内容区的高度，那么行内非替换元素的背景就与em框的高度相等（即值font-size），如果用户代理使用字体的最大上升变形和下降变形，背景就可能比ex框高或矮。因此，尽管可以为行内非替换元素指定line-height 为1em，但其背景还是有可能与其他行的内容重叠。

在CSS2或CSS2.1中没有办法避免这种重叠，不过已经建议网站建设CSS3增加一些属性，允许创作人员对用户代理的行为进行控制。在这些属性得到广泛实现之前，用CSS 无法得到真正准确的格式编排。

p {font-size: 15px; line-height: 18px;}

img (height: 30px; margin: 0; padding: 0; border: none;}

图7-44：替换元素可以增加行框的高度，但不影响line-height值

尽管有所有这些空白，但段落或图像本身的line-height有效值并没有因此改变。line-height:对图像的行内框没有任何影响。由于图7-44中的图像没有内边距、外边距或边框，其行内框与其内容区相同，在这里就是30像素高。

然而，网页设计行内替换元素还是有一个line-height值。为什么呢？在最常见的情况下，行内替换元素需要这个值，从而在垂直对齐时能正确地定位元素。例如，要记住，vertical-align的百分数值要相对于元素的line-height来计算。所以：

p {font-size: 15px; line-height: 18px;}

img {vertical-align: 50%;}

<p>The image in this sentence <img src="test.gif" alt="test image"> 

will be raised 9 pixels.</p>

line-height的继承值使图像上升9个像素（而不是其他数字）。如果没有line-height值，它就无法完成百分数值指定的垂直对齐，对于垂直对齐来说，图像本身的高度无关紧要，关键是line-height的值。

不过，对于网页设计其他替换元素，将line-height值传递到该替换元素中的后代元素可能很重要。SVG图像就是这样一个例子，它使用CSS对图像中的所有文本设置样式。