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

css 垂直方向 margin 边距 重合-LMLPHP

css 垂直方向 margin 边距 重合-LMLPHP

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

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

如下图:父子元素合并(设置一个父标签,给宽高和背景色,不给border。一个子标签,给宽高和border。会一起移动)

css 垂直方向 margin 边距 重合-LMLPHP

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

(a)相邻兄弟块元素间

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

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

解决办法:

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

2:为父元素设置 overflow: hidden 。(创建BFC)

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

05-15 06:10