在網(wǎng)頁中，每個(gè)元素都是作為矩形盒被描繪/渲染的。盒模型描述了元素的content,padding,border,margin是如何決定元素所占據(jù)的空間，也描述了它和頁面中其它元素的關(guān)系。
根據(jù)元素的display屬性皱碘，元素的box分為2類：block box和inline box。盒模型被應(yīng)用于這2類時(shí)隐孽，有所不同癌椿。在這片文章中我們會(huì)看到盒模型是如何被應(yīng)用于inline box。
inline盒和line盒
inline box被水平放置在line box中菱阵。
如果在一行中容納不下所有的元素踢俄，就在第一個(gè)line box的下一行創(chuàng)建一個(gè)新的line box。因此一個(gè)單獨(dú)的inline元素就被2行分割開（如下圖所示）
inline box的盒模型
當(dāng)一個(gè)inline box被多行分割后晴及，它在邏輯上仍然是一個(gè)單獨(dú)的box都办。這就意味著任何水平的padding,border,margin僅僅應(yīng)用于被box占據(jù)的首行和末行。
例如虑稼，下圖中高亮的span被2行分割琳钉。它的水平padding不適用首行的末尾和第二行的開始。
當(dāng)然蛛倦，元素垂直方向上的padding, border, margin不會(huì)推開在它上下的元素歌懒。
不過要注意，垂直方向的padding, border也被應(yīng)用了溯壶，并且padding也推開了border及皂。
如果你需要調(diào)整行與行之間的高度甫男，可是使用line-height代替。
用devtools審查inline box
當(dāng)debug布局問題時(shí)躲庄，擁有一個(gè)能給你完整圖畫的工具是非常重要的查剖。其中一個(gè)就是highlighter钾虐，所有的瀏覽器的devtools中都包含了它噪窘。你可以使用它選擇元素作仔細(xì)的審查，highlighter也給你提供了布局方面的信息效扫。
在上面的例子中倔监，highlighter被用來高亮一個(gè)被多行分割的inline元素。Highligh顯示了幫你對(duì)齊元素的指導(dǎo)菌仁，給出了節(jié)點(diǎn)的尺寸并且展示了盒模型的輪廓浩习。從火狐39開始，被分割的inline元素的盒模型輪廓展示了被元素占據(jù)的每一行济丘。在這個(gè)例子中谱秽，內(nèi)容區(qū)域以淡藍(lán)色顯示并被分為4行。節(jié)點(diǎn)也定義了右padding摹迷，并且highlighter以紫色展示padding區(qū)域疟赊。高亮每個(gè)單獨(dú)的line box對(duì)于理解盒模型是如何被應(yīng)用于inline元素是非常重要的，而且也幫你檢查了行間的距離和inline box的垂直對(duì)齊峡碉。
本文來源：https://hacks.mozilla.org/2015/03/understanding-inline-box-model/
