box模型的組成部分：

Content box：通過width和height屬性指定大小。

padding box：襯墊。包裹content盒模型。

border box

margin box

如下圖所示：

標準的CSS模型里，box的尺寸為content box，padding和border之和：

切換成另一種盒模型: alternative model

語法：

box-sizing: border-box

切換成alternative mode之后，height和width屬性指定的就是border box的高度和寬度，而不是standard盒模型里的content box的高度和寬度。

Whether you are using the standard or alternative box model, the margin is always added after the size of the visible box has been calculated.

無論哪種模型，margin值都是visible box的尺寸被計算之后，再累加上去的。

什么叫做margin collapse

如果兩段margin相鄰，比如下圖兩個段落，分別具有50px 的margin-bottom和30px的margin-top，則兩個段落間的間隔，不是50 + 30 = 80px，而是兩者的最大值，即50px.

更多Jerry的原創文章，盡在：“汪子熙”:

總結

以上是生活随笔為你收集整理的Firefox开发者工具里查看HTML元素的Box模型的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。