关于外边框相邻合并

关于外边框相邻合并@[TOC]

外边距合并以及清除外边距合并
什么是外边距合并和内外边距合并?
外边距合并以及内外边距合并的清除方式

外边距合并其实就是两个不同标签元素的外边距发生了合并，标签之间没有内边距、边框，设置外边距margin时，即两个外边距合并成了一个，显示边距大的。
那么问题来了，一般外边距合并有哪几种情况呢？小编这里就简单说一下三种情况，如有不周之处，还望指正！！！！
1、两个块级兄弟元素。
2、父子级关系的元素。
3、页面固定位置的元素。

前两者就不多说了，相信很多人都遇见过，清除方式也很简单，加边框去除外边距合并(内包含外边距合并)，或者加内边距来去除外边距合并，父子级的时候也可以为父级元素创建BFC也可以解决问题。
小编今天要说的是第三种情况：
当你的页面有两个标签时，代码如图所示：

此时header标签固定，脱离常规流块盒，页面效果显示如下：

当你设置div外边距时，代码和浏览器显示效果如下：


此时就是发生了外边距合并，div和header的外边距相邻，header的外边距为0px，就取div的上外边距50px。
由于此时header只是设置了固定位置，但是没有设置偏移，当我们给一个向上的偏移量top=0px 时，这个问题就解决了，感兴趣的朋友可以尝试一下，你是否有察觉到这种形式合并呢？
此文章为个人所感，如有不周正之处，还望不吝赐教！！！