本文共 634 字，大约阅读时间需要 2 分钟。

box模型的组成部分：

1. Content box：通过width和height属性指定大小。

2. padding box：衬垫。包裹content盒模型。

3. border box

4. 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的原创文章，尽在：“汪子熙”:

转载地址：https://jerry.blog.csdn.net/article/details/114069962 如侵犯您的版权，请留言回复原文章的地址，我们会给您删除此文章，给您带来不便请您谅解！