外边距塌陷(合并)问题(块类型元素)

外边距塌陷(合并)问题(块类型元素)

只出现在垂直方向

父子嵌套塌陷

**描述：**当父元素有上外边距时，子元素在设置上外边距时会出现一个取两个值较大的那个值作为最终的外边距 ，如果父元素本身没有上外边距此时给子元素设置上外边距会带着父盒子一起向下移动

  *{
            margin: 0;
            padding: 0;
            
        }
        .big {
            width: 300px;
            height: 300px;
            background-color: greenyellow;
        }
        .small {
            width: 100px;
            height: 100px;
            background-color: grey;
            margin-top: 20px;
        }

    <div class="big">
        <div class="small">

        </div>

原因：

表象：浏览器在解析时误会你设置的上外边距就是父盒子的上外边距

实质：BFC规则(块级上下文) 垂直方向是上嵌套的两个盒子外边距会合并(共用了一段公共区域)

方法:

1.不要让浏览器误会这段距离属于公共区域

(1)给父盒子加1px上外边框 border-top:1px solid #fff;(分隔)

(2)给父盒子加1px上内边距 padding-top:1px;(分隔)

(3)给父元素身上+overflow:hidden(触发BFC里私有块级作用域) 让这个盒子成为一个密闭区域 外部

不影响内部 内部不影响外部

兄弟平行上下塌陷

描述：

两个盒子设置上面盒子的下外边距和下面盒子的上外边距会取其中较大值作为最终的边距 相同时取其中一个

**原因：**两个盒子共用一段外边距

方法:

1. 避免 （写在盒子身上）
2. 给这两个盒子分别嵌套一个父盒子 这个父盒子身上写overflow:hidden
3. 最好只写在一个盒子身上