css 垂直方向 margin 边距 重合

1：控制两个相邻边盒子之间的距离，在A或者B盒子上用margin控制，就可以控制距离了。

2：父子级之间的元素，常规文档流中，只要垂直外边距直接接触就会发生合并。比如在写header标签时，想移动header的子元素nav的位置，就会带动header一起移动，而无法单独移动。这是因为相邻外边距合并，合并后外边距高度取两个发生合并外边距中较大者。

注：margin合并是指块级元素的上外边距与下外边距有时会合并为单个外边距

如下图：父子元素合并（设置一个父标签，给宽高和背景色，不给border。一个子标签，给宽高和border。会一起移动）

发生垂直方向外边距合并的有三种:

(a)相邻兄弟块元素间

(b)父元素及其首子元素和末子元素间（没有内边距或边框把外边距分隔开）

(c)自身合并（如元素没有加入内容，视觉上相当于不存在一样）

解决办法：

1：不让他们的边距重合。为父元素设置垂直方向的padding或者设置margin。

2：为父元素设置 overflow: hidden 。（创建BFC）

3：父级或子元素使用浮动或者绝对定位absolute。