CSS 盒子模型之外边距（margin）的注意点

这是我参与更文挑战的第 7 天，活动详情查看： 更文挑战

1.1 外边距（ margin ）属性

margin 方位属性

属性名	属性值	描述	实例
margin-top	正数px	设置上外边距的宽度	margin-top: 1px;
margin-right	正数px	设置右外边距的宽度	margin-right: 1px;
margin-bottom	正数px	设置下外边距的宽度	margin-bottom: 1px;
margin-left	正数px	设置左外边距的宽度	margin-left: 1px;
margin	1 到 4 个正数px	设置四个边距的宽度	margin: 1px 3px;

margin 属性值

margin 属性值	描述	实例
5px	当属性值为 1 个参数时，设置该盒子的四个外边距都为 5 像素	margin: 5px;
5px 10px	当属性值为 2 个参数时，设置该盒子的上下外边距为 5 像素，左右外边距为 10 像素	margin: 5px 10px;
5px 10px 15px	当属性值为 3 个参数时，设置该盒子的上外边距为 5 像素，左右外边距为 10 像素，下外边距为 15 像素	margin: 5px 10px 15px;
5px 10px 15px 20px	当属性值为 4 个参数时，设置该盒子的上外边距为 5 像素，右外边距为 10 像素，下外边距为 15 像素，左外边距为 20 像素	margin: 5px 10px 15px 20px;

1.2 外边距实现盒子水平居中

需要满足两个条件：

1. 盒子必须为块元素。
2. 盒子必须设置了 width 。

样式代码为：

.block_center {
    width: 800px;
    margin: 0 auto;
}

1.3 上下外边距合并问题

1.3.1 相邻块元素上下外边距的合并问题

当存在两个上下相邻的块元素时，如果上面的块元素有下外边距 margin-bottom ，下面的块元素有上外边距 margin-top ，则两个块元素之间的上下间距不是 margin-bottom 与 margin-top 之和，而是两者中的较大者。这种现象称为相邻块元素上下外边距的合并（也叫做外边距塌陷）。

解决方法：

直接给一个块元素设置margin-bottom 或 margin-top 。避免两个块元素同时有上下外边距。

1.3.2 嵌套块元素上下外边距的合并问题

当存在两个嵌套关系的块元素时，如果父元素没有上内边距 padding-top 及上边框 border-top ，则父元素的上外边距与子元素的上外边距会发生合并，表现为父元素和子元素同时下移两者中外边距较大者的像素距离。即使父元素的上外边距为 0 ，也会发生父子元素上边距合并。

解决方法：

1. 对父元素设置 1 像素的上边框 border-top-width: 1px; 或设置上内边距 padding-top: 1px; 。
2. 对父元素添加 overflow: hidden; 属性。

各位大佬，如果感觉本文章还不错的话，可否点个赞 (・ε・●)

如有错误之处, 恳请留言, 定会及时改正