什么是 Box 模型

边缘

浏览器为 HTML 文档中的每个元素创建一个矩形。Box 模型描述了如何将填充，边框和边距添加到内容以创建此矩形。

从图 CSS2.2 工作草案

四个区域中的每一个的周长称为边缘。每条边都定义一个盒子。

• 最里面的矩形是内容框。其宽度和高度取决于元素的渲染内容（文本，图像和它可能具有的任何子元素）。
• 接下来是填充框，由 padding 属性定义。如果没有定义 padding 宽度，则填充边缘等于内容边缘。
• 然后我们有边框框，由定义 border 属性。如果没有定义 border 宽度，则边框边缘等于填充边缘。
• 最外面的矩形是边距框，由 margin 属性定义。如果没有定义 margin 宽度，则边缘边缘等于边界边缘。

例

div {
    border: 5px solid red;
    margin: 50px;
    padding: 20px;
}

这个 CSS 将所有 div 元素设置为宽度为 5px 的顶部，右侧，底部和左侧边框; 50px 的顶部，右侧，底部和左侧边缘; 和 20px 的顶部，右侧，底部和左侧填充。忽略内容，我们生成的框将如下所示：

Google Chrome 的元素样式面板的屏幕截图

• 由于没有内容，内容区域（中间的蓝色框）没有高度或宽度（0px×0px）。
• 默认情况下，填充框与内容框的大小相同，加上我们在上面使用 padding 属性定义的所有四条边上的 20px 宽度（40px 乘 40px）。
• 边框与填充框的大小相同，加上我们在上面定义的 5px 宽度与 border 属性（50px 乘 50px）。
• 最后边距框的大小与边框相同，加上我们在上面用 margin 属性定义的 50px 宽度（给我们的元素总大小为 150px×150px）。

现在让我们给我们的元素一个同样风格的兄弟。浏览器查看两个元素的 Box 模型，以确定新元素应该与前一个元素的内容相关的位置：

每个元素的内容由 150px 间隙分开，但两个元素的盒子相互接触。

如果我们然后修改我们的第一个元素没有右边距，右边距边缘将与右边框边缘相同，我们的两个元素现在看起来像这样：