英文原文：http://meyerweb.com/eric/css/inline-format.html
重要提示：
本文并非一篇简单地介绍内联格式模型（inline formatting model）的文章。相反，它是对内联格式（inline formatting）本质规则和过程 的扼要剖析，是对CSS2中规则的总结。本文的知识点十分密集，即使错过其中一个小小的知识点也可会导致根本性地误解。本文经过了CSS工作 组（CSS Working Group）和多个CSS组织（CSS cmmounity）反复推敲和检查，但是这并是说本文已经做到至善至美了。也可能有些情况这里没 有涉及到，同时有可能文中提到的一些名词术语对于新手来说存在一定理解上的困难。但是我坚信本文得出的结论是正确无疑的。如果你确定 本文存在某方面的谬误，请把你的观点写下来发信到www-style@w3.org进行讨论。谢谢！
前言：
为了清晰地描述内联格式模型（inline formatting model）的工作原理，弄清使用到的专业术语的具体含义非常重要。首先来看几个等式，然后是对这些术语的解释。
- em-box = font-size = content-area
- content-area + (half-)leading = inline box
- inline box(min/max) = line-box
其中，
- em-box = 指定字体中定义的em-box（文本本身盒模型的大小）
- font-size ＝ em-box中指定用于度量字体显示大小的数值
- content-area = 在非置换元素中，盒模型是使用元素内每个字符的font-size的整体大小来描述的；在可置换元素中，则中元素的实际高度加上margin、border、padding的值；
- （half-）leading ＝ 每个元素由于font-size和line-height的不同，在content-area的上方和下方产生的差值，并且上下方的差值相等的
- inline box ＝ 每个元素的(half-)leading和content-area之和；对于非转换元素，一个元素的inline-box的高度恰好等于它的line-height的值；对于可转换元素，一个元素的inline box高度则正好等于其实际高度加上所有的margin、border、padding等。
- line-box＝它的上下边界分别是行内所有inline-box的最高点和最低点。
上面的描述中所未涉及到的几点：
- content-area和块级元素的内容盒框相似
- 内联元素的背景会同时应用在元素content-area和padding上
- 内联元素的边框是围绕在contend-area和padding之外的
- 内联元素及其衍生盒模型的非转换元素中在垂直方向上应用margin将不会起作用（但是水平方向可以）
- 可转换元素的margin和border会影响元素line-box的高度，因此也会影响到所在行的line-box高度
此外，inline box是根据vertical-align来处理对齐方式的。上面的说明中没有提到这一点，但是它却CSS2：10.8中介绍的规则。
结论：
在只有一行font-size和line-height相等的内联非置换元素情况下同，解决起来比较简单。content-area直接通过font-size来定义，line-box的高度等于line-height。（后面会有更加充分的解释）
而在同时包含有可置换和非置换内联元素的情况下（什么是可置换、非可置换元素？），它们有不同的font-size和line-height值，问题就得使用下面的方法来解决。对于每个元素来说，content-area的高度取决于每一个非可置换元素的font-size和可置换元素的实际高度加上所有的padding、border和margin。之后再加上leading，一半位于上部，一半位于下部。得出的这个数值就是inline box中用以计算对齐方式的数值。inline-box中顶部最高位置就是line-box的顶部，inline-box中底部的最低位置就是line-box中的底部（也就前面所说的line-box的上下边界由所以inline-box的最高和最底位置来决定）。
这就是说，一个足够大的元素，即使只有一个很小的line-height，也可以通过指定content-area的值来使得和后面内容保持较大行距。例如，考虑下面的例子：
<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>
超级链接的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的顶部对齐的。
以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属性的百分比数值时可以使用）。例如，考虑下面的例子：
<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>
图片的content-area总高度为136pt（120pt + 8pt + 8pt），12pt的line-height会被忽略。此外，图片底部的外边缘（content加上margin）将会同baseline对齐，这会使line-box的顶部升高，因为图片inline box的顶部会比前面例子中的链接顶部要高。使可置换元素的inline-box比元素大小还要小的唯一方法就是使用负的margin值。顶部对齐的粗体文本将会与line-box的顶部对齐，这也正好是图片的顶部外边缘（content加margin）。
测试：对照这个测试文件和相关显示效果。两个示例中，都是在上面的代码基础进行了扩展，此外，前者和代码设置相同，后者使用了的30pt的图片，其margin值为6pt。
如果父级内联元素设置了border，那么border将和元素的font-size一致；同时也会和元素的content-area相匹配，后代元素。例如，考虑下面的例子：
<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>
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的链接。
