CSS学习笔记——外边距坍塌

1.坍塌发生的情况

外边距坍塌（margin collapsing）是指两个元素紧挨着时，两个外边距会缩小到一个外边距，这个词在《精通CSS》（第2版）这本书中也被称为“外边距叠加”。这个现象只会发生在Normal flow布局中，不会发生在绝对定位布局和浮动布局。（详情可参看CSS学习笔记——布局）

1.1 两个块级元素上下布局时发生坍塌

上下两个元素外边距接壤时，下面的元素会上移。他们之间的距离（边框到边框）会坍塌到一个外边距x，这个外边距x是两个外边距的较大值。

下面看一个实例

//index.html html5中head body标签可以省略
<div class="test1">Class test1</div>
<div class="test2">Class test2</div>
<link rel="stylesheet" type="text/css" href="test.css">

//test.css
.test1{
    color: red;
    background-color: black;
    margin: 10px;
    padding: 5px;
    border: 10px solid;
}

.test2{
    color: blue;
    margin: 20px;
    padding: 10px;
    border: 10px solid;
}

橙色的是chrome浏览器指示工具，指示了test2元素的外边距是20px，刚好到达test1元素的边框。test1元素的10px外边距坍塌消失。
backgroud-color显示的区域由内边距padding决定。外边距margin无颜色设置。

1.2 父子元素坍塌

如果父元素没有内边距和边框，即父子元素之间没有缓冲的东西阻挡一下，那么子元素的外边距就会坍塌。在下面例子中，两处css都注释掉，会出现上面那张图；如果放开任一个注释，那么就会出现中间那张图；如果父元素有上内边距没有下内边距，那么就会出现不对称坍塌的情况，上面不坍塌，下面坍塌，正如下面那张图。

//index.html
<div class="test1">Class test1</div>
<div class="test2">Class test2</div>
<link rel="stylesheet" type="text/css" href="test.css">

.test1{
    color: red;
    background-color: grey;
    margin: 10px;
      /*padding: 1px;*/
      /*border: 1px solid;*/
}

.test2{
    color: blue;
    margin: 20px;
    background-color: black;
}

2.自身不会坍塌

在《精通CSS》（第二版）的第42页中，文中说空元素（无内容、边框、内边距）会自身坍塌，但经过试验，发现空div元素不会自身坍塌。

3.坍塌作用

外边距坍塌这个现象很奇怪，为什么会有这么一个隐含的潜规则呢，《精通CSS》中给出了一个应用场景：在文章中，如果没有外边距坍塌作用，那么第一段的上边距会显得跟其他段落间距不一致。

【Reference】
1. 《精通CSS》（第2版）