【CSS】Day6--请描述margin边界叠加是什么及解决方案。⭐️⭐️

[chenliqio]

一、margin重叠

只有在相邻的垂直方向外边距才会发生重叠现象。
重叠的特点：

• 兄弟元素

  1. 相邻垂直的兄弟元素之间的外边距叠加，会取两者之中较大的值；

  2. 特殊情况有：

     • 如果相邻外边距一正一负，则取二者之和；
     • 如果相邻外边距都为负，则取绝对值最大的那个。

  兄弟元素之间的重叠对开发是有利的，可以不用处理。

• 父子元素 父子元素相邻的外边距，子元素的外边距值会传递给父元素（主要是margin-top），导致父元素会跟着子元素移动，影响开发样式。

二、解决方案

1. 在父元素上加padding-top，但是会让整个盒子变长，多以要在盒子高度处减去padding-top的值。

2. 在父元素上加上一个border，同时高度减去border的值，以及子元素的margin-top减去border的值。

3. 开启BFC,子元素设置浮动属性，父元素设置overflow:hidden。