在网页中,每个元素都是作为矩形盒被描绘/渲染的。盒模型描述了元素的content,padding,border,margin是如何决定元素所占据的空间,也描述了它和页面中其它元素的关系。
根据元素的display属性,元素的box分为2类:block box和inline box。盒模型被应用于这2类时,有所不同。在这片文章中我们会看到盒模型是如何被应用于inline box。
inline box被水平放置在line box中。
如果在一行中容纳不下所有的元素,就在第一个line box的下一行创建一个新的line box。因此一个单独的inline元素就被2行分割开(如下图所示)
当一个inline box被多行分割后,它在逻辑上仍然是一个单独的box。这就意味着任何水平的padding,border,margin仅仅应用于被box占据的首行和末行。
例如,下图中高亮的span被2行分割。它的水平padding不适用首行的末尾和第二行的开始。
当然,元素垂直方向上的padding, border, margin不会推开在它上下的元素。
不过要注意,垂直方向的padding, border也被应用了,并且padding也推开了border。
如果你需要调整行与行之间的高度,可是使用line-height代替。
当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/