外边距合并
2017-11-25 本文已影响0人
荷尔蒙榨汁机
两种外边距合并的情况
- 当两个存在margin的盒子嵌套时，内外的盒子的margin会存在合并。
image
- 当两个盒子相邻时，上面盒子的margin-bottom和下面盒子的margin-top距存在合并。
image
- 一个空元素，它有外边距，但是没有边框或填充。在这种情况下，上外边距与下外边距就碰到了一起
image
如果这个外边距遇到另一个元素的外边距，它还会发生合并：
image
注意：当margin存在负值时，合并后的margin是，两个margin相加。
消除外边距合并
- 当两个盒子是嵌套关系时，给父盒子添加
border或者overflow: hidden形成bfc，可以消除外边距合并。 - 当两个盒子相邻时，可以给一个盒子在包裹一个盒子，添加overflow:hidden形成bfc，可以消除外边距合并。例子
