css外边距重叠介绍

介绍

外边距合并指的是，当两个垂直外边距相遇时，形成一个外边距。合并后的外边距高度等于两个发生合并的外边距的高度重的较大者

外边距合并的几种情况

1.当一个元素出现在另一个元素上面时候，第一个元素的下边距和第二个元素的上边距发生重叠

1.jpg

2.当一个元素包含在另一个元素中时候，它们的上/下边距也会发生合并

2.jpg

3.外边距甚至可能与自身发生合并，假设一个空元素，它有外边框，但是没有边框或者填充，
这种情况下，上外边距和下外边距就碰到一起，发生重叠；

3.jpg

如果这个外边距遇到另一个元素的外边距，它还会发生合并

4.jpg

注意

只有普通文档流中，块的垂直外边距才会发生外边距合并。
行内框、浮动框、绝对定位之间的外边距不会重叠

不需要外边距重叠时的解决方案

1.浮动
2.display： inline-block;
3.外层元素padding代替margin
4.内层元素设置边框： border：1px solid transparent;
5.用同一方向的margin, 都用margin-top 或者 margin-bottom

等等