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

重要提示：

本文并非一篇简单地介绍内联格式模型（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的最高和最底位置来决定）。