内联格式化模式（line-height原理）（2）

这就是说，一个足够大的元素，即使只有一个很小的line-height，也可以通过指定content-area的值来使得和后面内容保持较大行距。例如，考虑下面的例子：

<FONT face=Arial><P style="line-height: 12pt; font-size: 12pt;">  
<A style="font-size: 128pt;">anchor</A>   
angry text   
<B style="vertical-align: top">bold</B>  
</P></FONT>

超级链接的content-area高度为128pt，但是由于指定了line-height，它的inline box只有12pt高。这个inline box位于baseline之上；根据上面的参数，我们就可能判断超级链接底部（bottom）位于baseline之上30pt。这就使得inline box的顶部位于baseline之上42pt。而纯文本则正好偏于baseline之上，其content-area高度为12pt，底部位于baseline之下2pt。加粗文本的content-area也是12pt高，但它是靠line-box的顶部对齐的。

“根据上面的参数，我们就可能判……位于baseline之上30pt”的计算原理：
    以Helvetica字体为例来说。在Helvetica字体中已经指定了baseline的位置，文本会从baseline下降-219/1000，上升781/1000。因此，对于font-size大小为128pt来说，它下降（位于baseline以下）部分为-28pt（128pt*219/1000），上升（位于baseline心目）部分为100pt。根据line-height的规则，本例中为12pt，实际起作用的halfheading就是12pt-128pt)/2 = -58pt。half leading是从128pt 字母高度（EM）的顶部和底部计算得出的。因此，字体大小为128pt的inline box的content area底部就是-28pt-(-58pt)=58pt-28pt=30pt。同样，inline box的content area的顶部位于（baseline的）100pt-58pt＝42pt处。
（注意：Helvetica字体处于数字的时候有轻微的变动。它实际上升和下降数值接近于775/1000 EM和-225/1000 EM。）

对于content area的baseline可能看来有点“怪异”，因为baseline不是正好处在字符的中间，而是向字符的底部稍微有点偏移。需要注意的是，这个例子只是用以介绍CSS规则的一个方面，而不是说每个人都应该对字体使用较大的负leading。
      --Steve Zilles

现在计算得到line-box高度为44pt：42pt位于baseline之上，2pt位于baseline之下。加粗字体的inline-box顶部（在本例中同content-area一致）和line-box字体的顶部重合。纯文本之上有30pt的空白，而链接文字上部会有baseline之上58pt、之下26pt“浸入”到相邻行中中（注意，这些数字都是假定链接文本的inline box底部位于baseline以上30pt，溢出扩展部分主要根据链接的“content-area”的中点与baseline之间的关系决定）。

测试：对照这个测试文件和相关显示效果。两个示例中，都是在上面的代码基础进行了扩展，此外，前者和代码设置相同，后者使用了的36pt的链接。

如果在行内出现了一个可置换文本，它的content-area就等于它的实际高度和宽度加上所有的padding、border和margin。line-height对于可置换元素的inline box没有效果（但是当解释vertical-align属性的百分比数值时可以使用）。例如，考虑下面的例子：

<FONT face=Arial><P style="line-height: 12pt; font-size: 12pt;">  
<IMG SRC="filler.gif" style="height: 120pt; width: 16pt; margin: 8pt;">   
angry text   
<B style="vertical-align: top">bold</B>  
</P></FONT>  

图片的content-area总高度为136pt（120pt + 8pt + 8pt），12pt的line-height会被忽略。此外，图片底部的外边缘（content加上margin）将会同baseline对齐，这会使line-box的顶部升高，因为图片inline box的顶部会比前面例子中的链接顶部要高。使可置换元素的inline-box比元素大小还要小的唯一方法就是使用负的margin值。顶部对齐的粗体文本将会与line-box的顶部对齐，这也正好是图片的顶部外边缘（content加margin）。

测试：对照这个测试文件：line-height.htm （4.37 KB）和相关显示效果。

两个示例中，都是在上面的代码基础进行了扩展，此外，前者和代码设置相同，后者使用了的30pt的图片，其margin值为6pt。

如果父级内联元素设置了border，那么border将和元素的font-size一致；同时也会和元素的content-area相匹配，后代元素。例如，考虑下面的例子：

<FONT face=Arial><P style="line-height: 12pt; font-size: 12pt;">  
<SPAN style="border: 1px solid gray;">  
<A style="font-size: 72pt;">anchor</A>   
<IMG SRC="filler.gif" style="height: 60pt; width: 16pt; margin: 4pt;">   
angry text   
<B style="vertical-align: top">bold</B>  
</SPAN>  
</P></FONT> 

SPAN的边框将和假定的content-area一致，在本例中为12pt，因为从父元素中继承来的font-size是12pt。（此外，在本例中SPAN的content-area和其inline box正好一致，因为font-size和line-height数值相同。）这个边框将会穿过段落内外部元素，可能在任何顶部对齐（top-align）的元素下方显示。在内联元素与SPANinline box重叠的情况下，规范中并未指定谁应该在谁的上方。测试：对照这个测试文件和相关显示效果。两个示例中，都是在上面的代码基础进行了扩展，此外，前者和代码设置相同，后者使用了的30pt的图片，其margin值o为2pt，此外还有一个36pt的链接。

测试：对照这个测试文件：line-height-test.htm （4.66 KB）和相关显示效果。两个示例中，都是在上面的代码基础进行了扩展，此外，前者和代码设置相同，后者使用了的30pt的图片，其margin值o为2pt，此外还有一个36pt的链接。在一些常见情况下，可以查看这个测试文档和H?kon Lie's 提供的相关显示效果。

在一些常见情况下，可以查看这个测试文档：line-height2.htm （3.86 KB）和H?kon Lie's 提供的相关显示效果。

英文原文：http://meyerweb.com/eric/css/inline-format.html