外边距合并

一、外边距合并出现的条件

垂直方向 上 相邻的元素 才会有外边距合并的问题

注意：父子元素间的相邻 是指：父元素和第一个子元素，只有第一个子元素才会和父元素外边距合并

二、父子相邻元素间的外边距合并

实际现象：在给子元素设置margin-top后，整个父元素向下移动了100px，子元素与父元素的相对位置没有改变。

解决方案：

1. 改子元素的 margin-top 为父元素的 padding-top，同时为防止父元素变大，再设其为怪异盒子
2. 给父元素添加边框属性 border-top 即可
3. 给父元素或子元素设置浮动属性。
4. 给父元素或子元素设置position：absolute属性
5. 给父元素设置overflow：hidden
6. 给父元素或子元素设置display：inline-block

三、兄弟相邻元素间的外边距合并

实际现象：两兄弟盒子相邻，在给上面盒子设置 margin-bottom 后，再给下面盒子设置 margin-top ，实际两盒子的间距不会叠加，而是取较大值。