1. 盒子模型介绍
在前端开发中，我们经常需要为页面中的 HTML 元素设置样式，如字体、颜色、大小等。这些样式的设置很大程度上由盒子模型决定。盒子模型是用于在 HTML 中布置元素的基本概念，它是描述 HTML 元素的一种方式，同时也是 CSS 的基石之一。
盒子模型可以将每个 HTML 元素看作一个盒子，由外到内依次是 margin、border、padding、content 四个部分，如下图所示：
盒子模型的理解对于前端开发至关重要，因为它是设置样式、布局和定位的核心内容。在学习 CSS 布局技术时，我们需要清楚地理解盒子模型的各个部分，并学会如何使用 CSS 控制各个部分的特性。
2. margin
margin是元素与元素之间的空间(外边距)，它有四个方向：上(top)、左(left)、下(bottom)、右(right)。margin 用于设置元素与其它元素之间的间隔。
margin 属性常用属性值：
margin-top： 用于设置元素顶部外边距。默认值为0px。
margin-bottom：用于设置元素底部外边距。默认值为0px。
margin-left：用于设置元素左侧外边距。默认值为0px。
margin-right：用于设置元素右侧外边距。默认值为0px。
可以通过以下代码演示margin的效果：
//html
<div class="box"></div>
//css
.box{
margin-top: 10px;
margin-bottom: 10px;
margin-left: 10px;
margin-right: 10px;
}
上面的代码会给盒子模型四周加上 10px 的外边距，其中 margin-top 指定元素顶部的外边距，margin-bottom 指定底部的外边距，margin-left 指定左侧的外边距，margin-right 指定右侧的外边距。如下图所示：
2.1 margin合并
margin合并是指当相邻两个元素之间的外边距发生重叠时，两个元素之间的外边距会发生变化。如下图所示：
当相邻的两个元素发生 margin 合并时，它们的外边距会发生变化，此时的外边距是两个元素外边距的最大值。margin 合并有以下情况：
相邻兄弟元素的 margin-top 与 margin-bottom
当相邻的两个兄弟元素(两个元素具有相同的父元素，且它们之间没有任何内容或者 border / padding 属性将它们分开)之间的 margin-top 和 margin-bottom 距离很小(指它们之间的距离小于 margin-top 和 margin-bottom 中的较大者)的时候，它们之间的外边距就会合并。如下图所示：
可以看到，两个盒子的外边距互相重叠，它们两个之间的较大值(即 20px) 会成为它们之间的距离。这种情况可以通过设置父元素的 overflow 为 hidden 或者设置一个透明的 border 解决。
如下图所示：
父元素和第一个 / 最后一个子元素的 margin-top 与 margin-bottom
当一个父元素包含了一个第一个或最后一个子元素 (子元素的 margin-top 或 margin-bottom) 时，这两者会重叠。此时的外边距是父元素的外边距与子元素的外边距的较大值。如下图所示：
空元素的 margin-top 和 margin-bottom
当一个元素没有内容以及 border / padding ，并且它的 margin-top 和 margin-bottom 都进行了设置，则它们之间会发生 margin 合并。如下图所示：
3. border
border是 HTML 元素的边框，表示元素的边框宽度、样式和颜色。
border属性常用属性值：
border-width：用于设置 border 的宽度，如果值只有一个，则表示边框的四个方向均相等。默认值为 medium。
border-style：用于设置 border 的样式，如：solid，dotted，dashed等。默认值为 none 。
border-color：用于设置 border 的颜色，默认值为父元素的文本颜色。
以下代码可以给盒子模型设置一个红色的边框：
//html
<div class="box">我是一个盒子模型</div>
//css
.box{
border: 2px solid red;
}
上面的代码将会使盒子模型产生一个宽度为 2px、样式为实线、颜色为红色的边框。
4. padding
padding 是指内容区域与内容区域外边框之间的空间，表示元素的内边距。如下图所示：
padding 属性常用属性值：
padding-top：用于设置内容区域的顶部内边距。默认值为0px。
padding-bottom：用于设置内容区域底部内边距。默认值为0px。
padding-left：用于设置内容区域左侧的内边距。默认值为0px。
padding-right：用于设置内容区域右侧的内边距。默认值为0px。
可以通过以下代码演示 padding 的效果：
//html
<div class="box">我是一个盒子模型</div>
//css
.box{
padding-top: 10px;
padding-bottom: 10px;
padding-left: 10px;
padding-right: 10px;
}
上面的代码会给盒子模型四周加上 10px 的内边距，其中 padding-top 指定顶部的内边距，padding-bottom 指定底部的内边距，padding-left 指定左侧的内边距，padding-right 指定右侧的内边距。如下图所示：
5. content
content 是 HTML 元素的实际内容区域，包括文本、图片以及其它东西。content 的尺寸大小由用户代理(浏览器)根据元素的内容来计算得到，它的宽度可以通过 width 属性来设置。不包括 padding、border 和 margin。
6. 总结
在前端开发中，我们经常需要使用盒子模型来对 HTML 元素进行布局和定位。盒子模型由 margin、border、padding 和 content 四个部分组成。 margin 用于设置元素与其它元素之间的间隔；border 是 HTML 元素的边框；padding 表示元素的内边距；而 content 则是 HTML 元素的实际内容区域。清晰地理解盒子模型及其各个部分的特性，是前端开发的基础之一。