合并垂直外边距

在普通块级元素的垂直格式化元素的垂直格式化一文中，我们提到，块级元素在某些情况下会发生垂直方向的外边距的合并，本文来总结一下垂直外边距合并的场景以及如何避免发生垂直外边距的合并。

垂直外边距合并的场景

1. 两个相邻的兄弟元素
   两个相邻的兄弟元素，即当两个元素是相邻的，且是同一个父元素时，上方元素的margin-bottom和下方元素的margin-top会发生垂直外边距合并
   2.元素和它的首尾子元素
   垂直外边距的合并不止发生在兄弟元素之间，父元素和其第一个或最后一个元素也有可能发生合并外边距，当父元素没有上边框时， 父元素的上外边距和它的第一个子元素的上外边距会发生垂直外边距合并，同样地，当父元素没有下边框时，父元素的下外边距和它的最后一个子元素的下外边距也会发生垂直外边距合并。
   注意在第二中情况中，只有当父元素的上边框或下边框不存在时，才会发生对应的外边距合并，这是因为父元素若存在边框，则父元素的边框使得在视觉上将父元素本身的外边距和父元素的内容（包括子元素）分隔开来，就不会存在合并外边距之说了。而第一种情况中的兄弟元素之间，两个相邻的margin之间永远没有阻碍，和边框无关。

规避垂直外边距的合并

要想避免垂直外边距的合并有很多种方式，这里简要列出几种常见的方法。

1. 为了解决父子之间的外边距的合并，可以给父元素添加上边框或下边框。
2. 设置一个元素为浮动元素，可以避免相邻的盒模型的垂直外边距合并。
3. 设置了overflow属性的元素和它的子元素之间也不会发生垂直外边距合并
4. 设置一个元素为绝对定位，可以避免与其他元素的垂直外边距合并
5. 设置一个元素的display为inline-block，可以避免与其他元素的垂直外边距合并。