理解inline元素的盒模型

在网页中，每个元素都是作为矩形盒被描绘/渲染的。盒模型描述了元素的content,padding,border,margin是如何决定元素所占据的空间，也描述了它和页面中其它元素的关系。

根据元素的display属性，元素的box分为2类：block box和inline box。盒模型被应用于这2类时，有所不同。在这片文章中我们会看到盒模型是如何被应用于inline box。

inline盒和line盒

inline box被水平放置在line box中。

如果在一行中容纳不下所有的元素，就在第一个line box的下一行创建一个新的line box。因此一个单独的inline元素就被2行分割开（如下图所示）

inline box的盒模型

当一个inline box被多行分割后，它在逻辑上仍然是一个单独的box。这就意味着任何水平的padding,border,margin仅仅应用于被box占据的首行和末行。

例如，下图中高亮的span被2行分割。它的水平padding不适用首行的末尾和第二行的开始。

当然，元素垂直方向上的padding, border, margin不会推开在它上下的元素。

不过要注意，垂直方向的padding, border也被应用了，并且padding也推开了border。

如果你需要调整行与行之间的高度，可是使用line-height代替。

用devtools审查inline box

当debug布局问题时，拥有一个能给你完整图画的工具是非常重要的。其中一个就是highlighter，所有的浏览器的devtools中都包含了它。你可以使用它选择元素作仔细的审查，highlighter也给你提供了布局方面的信息。

在上面的例子中，highlighter被用来高亮一个被多行分割的inline元素。Highligh显示了帮你对齐元素的指导，给出了节点的尺寸并且展示了盒模型的轮廓。从火狐39开始，被分割的inline元素的盒模型轮廓展示了被元素占据的每一行。在这个例子中，内容区域以淡蓝色显示并被分为4行。节点也定义了右padding，并且highlighter以紫色展示padding区域。高亮每个单独的line box对于理解盒模型是如何被应用于inline元素是非常重要的，而且也帮你检查了行间的距离和inline box的垂直对齐。

本文来源：https://hacks.mozilla.org/2015/03/understanding-inline-box-model/