相邻块元素垂直外边距合并

清除元素的默认内外边距👇👇

• 行内元素为了照顾兼容性,尽量只设置左右内外边距，不要设置上下内外边距。

padding:0;         /* 清除内边距 */
margin:0;          /* 清除外边距 */

使用margin定义块元素的「垂直外边距」时，可能会出现外边距的合并。

(1). 相邻块元素垂直外边距的合并

• 当上下相邻的两个块元素相遇时，如果上面的元素有下外边距margin-bottom
• 下面的元素有上外边距margin-top，则他们之间的垂直间距不是margin-bottom与margin-top之和
• 「取两个值中的较大者」这种现象被称为相邻块元素垂直外边距的合并（也称外边距塌陷）。

「解决方案：尽量给只给一个盒子添加margin值」。

(2). 嵌套块元素垂直外边距的合并（塌陷）

• 对于两个嵌套关系的块元素，如果父元素没有上内边距及边框
• 父元素的上外边距会与子元素的上外边距发生合并
• 合并后的外边距为两者中的较大者

「解决方案：」

1. 可以为父元素定义上边框。
2. 可以为父元素定义上内边距
3. 可以为父元素添加overflow: hidden。

还有其他方法，比如浮动、固定、绝对定位的盒子不会有问题，后面咱们再总结。。。

盒子模型布局稳定性

优先使用 宽度 （width） 其次 使用内边距（padding） 再次 外边距（margin）

width >  padding  >   margin   

原因：

• margin 会有外边距合并 还有 ie6下面margin 加倍的bug（讨厌）所以最后使用。
• padding 会影响盒子大小， 需要进行加减计算（麻烦） 其次使用。
• width 没有问题（嗨皮）我们经常使用宽度剩余法 高度剩余法来做。