在前几节中我们已经了解到，网页设计中改变一个行内元素的line-height可能导致文本行相互重叠。不过，在所有情况下，这种修改都是针对单个元素的，所以，如何以一种更一般的方式影响元素的line-height而避免内容重叠呢？
一种办法是对font-size有改变的元素结合使用em单位。例如：
p {font-size: 14px; line-height: 1em;}
big {font-size: 250%; line-height! 1em;}
<p> Not only does this paragraph have "normal" text, but it also<br>
contains a line in which <big>some big text </big> is found.<br>
This large text helps illustrate our point.
</p>
通过为big元素设置一个line-height，就提高了行框的总高度，从而提供足够的空间来显示这个big元素，而不会与任何其他文本重叠，也不会改变段落中所有行的line-height。这里使用了值1em，所以big元素的line-height将设置为与big的 font-size大小相等。要记住，网站建设line-height相对于元素本身的font-size设置，而不是相对于父元素设置。其结果如图7-37所示。
注意，以下样式也会生成如图7-37所示的结果：
p {fpnt-size: 14px; line-height: 1;}
big (font-size: 250%;)
除非line-height值作为缩放因子被继承，否则p和big元素的line-height值都为1。因此，网页设计中行内框的高度与内容区的高度一致。
一定要真正理解前几节的介绍，因为如果再增加边框，问题会更复杂。假设在所有超链接上加一个5像素的边框：
a:link {border: 5px solid blue;}
倘若网站建设没有设置一个足够大的line-height来容纳这个边框，就有覆盖其他行的危险。可以使用line-height增加未访问链接行内框的大小，就像前例中对big元素的做法一样；在这里，只需让line-height值比这些链接的font-size值大10像素。不过，如果你不知道字体大小是多少像素，这可能很困难。
另一种解决方法是增加段落的line-height。这将会影响整个元素中的每一行，而不只是出现加边框超链接的那一行：
p {font-size: 14px; line-height: 24px;}
a:link {border: 5px solid blue;}
由于各行上下都增加了额外的空间。超链接外的边框不会覆盖其他行，如图7-38所示，
图7-38：增加line-height以为行内元素边框留出空间
当然，这种方法在这里是可行的，因为所有文本的大小都相同。如果行中还有另外一些元素改变了行框的高度，边框情况也可能发生变化。考虑以下规则：
P {font-size: 14px; line-height: 24px;}
a:link {border: 5px solid blue;}
big {font-size: 150%; line-height: 1.5em;}
根据这些规则，段落中big元素行内框的高度将是31.5像素（14x1.5x1.5），这也是行框的高度。为了保证基线间隔一致，必须让p元素的line-height等于或大于32px,
网页设计中各行框的具体高度取决于其组成元素相互之间如何对齐。这种对齐往往很大程度上依赖于基线落在各元素（或匿名文本各部分）中的哪个位置，因为这个位置确定了其行内框如何摆放。基线在各em框中的位置对于不同的字体是不同的。这个信息内里在字体文件中，除非直接编辑字体文件，否则无法修改。
因此，要得到一致的基线间隔，这更像是一门艺术而不只是一门科学。如果网页设计中使用一种单位（如em）来声明所有字体大小和行高，就很有可能得到一致的基线间隔。不过，如果混合使用了不同的单位，就会困难得多，甚至是不可能的。在写作本书时，为了让创作人员能够保证一致的基线间隔而不论内联内容是什么，已经提出了很多属性提案，这会大大角化行内格式化的某些方面。不过，所建议的这些属性都没有具体实现，所以其采纳还遥遥无期。
可以看到，设置line-height的最好办法是使用一个原始数字值。之所以说这种方法最好，原因是这个数会成为缩放因子，而该因子是一个继承值而非计算值。假设你希望一个文档中所有元素的line-height都是其font-size的1.5倍，可以如下声明：
body {line-height: 1.5;}
缩放因子1.5在元素间逐层传递，在各层上，这个因子都作为一个乘数与各元素的font-size相乘。因此，以下标记会得到如图7-39所示的结果：
p {font-size: 15px; line-height: 1.5;}
small {font-size: 66%;}
big {font-size: 200%;}
<p>This paragraph has a line-height of 1.5 times its font-size. In addition,
any e1ements within it <small>such as this small element</small> also have
line-heights 1.5 times their font-size...and that includes <big>this big
e1ement right here</big>. By using a scaling factor, line-heights scale
to match the font-size of any e1ement.</p>在本例子中，small元素的行高为15px，而对于big元素则为45px（这些数看上去有些过分，不过它们与总的页面设计是一致的）。当然，如果你不希望big文本生成太多行间距，可以为它另外指定一个line-height值，这会覆盖继承的缩放因子：
p {font-size: 15px; line-height: 1.5;}
small {font-size: 66%;}
big {font-size: 200%; line-height: 1em;}
还有一种解决方案（可能这是最简单的一种方法），即适当地设置样式，使行高恰好能包含行内容，而没有多余的空间。这里你可能会使用line-height值1.0。这个值乘以每个font-size，其结果与各元素的font-size值完全相等。因此，对于每个元素，行内框与内容区相同，这意味着会使用所需的绝对最小大小来包含各元素的内容区。
注意：网页设计中大多数字体在字符字形行之间还显示有一点空间。因为字符往往比其em框要小。只有script ("cursive"）字体例外，其字符字形往往大于其em框。