div外边距塌陷问题

块级元素的上下外边距有时候会合并，合并后的外边距等于合并前两个外边距中的较大值，这种现象称为外边距塌陷。

外边距塌陷有以下三种情况：

同级相邻元素

同级相邻元素之间的外边距会塌陷，塌陷后的间距等于两个元素外边距的较大值（如果后者被清除浮动，不遵循此规则），例如：

h1 {
  margin: 0 0 25px 0;
  background: #cfc;
}
p {
  margin: 20px 0 0 0;
  background: #cf9;
}

同级元素外边距塌陷

父子元素间的边距塌陷

如果块级父元素中，不存在border, padding, 行内元素以及清除浮动这四条属性（对于border和padding，也可以说，当上border及上padding宽度为0时），那么这个块级元素和其第一个子元素的上外边距（margin-top）就可以说”挨到了一起“。此时这个块级父元素和其第一个子元素就会发生 上外边距塌陷 现象，换句话说，此时这个父元素对外展现出来的外边距将直接变成这个父元素和其第一个子元素的margin-top的较大者。

类似地，若块级父元素的下外边距（margin-bottom）与它的最后一个子元素的下外