前端面经之边距折叠——三种触发情况及解决方案

本文链接：https://blog.youkuaiyun.com/weixin_46714216/article/details/141871866

边距折叠目录

前文

外边距折叠折叠指的是相邻两个外边距合并成一个外边距的现象。一般说到折叠外边距问题，都会自然而然的想到的一种情况是相邻的两个同胞块级元素在纵向上的相邻的外边距会发生折叠，只保留其中一个外边距。实际上，有三种情况会导致相邻外边距的折叠。

一、相邻外边距发生折叠的原因

发生相邻两个外边距折叠的原因是两个相邻外边距的直接接触。

二、会发生相邻外边距折叠的三种情况

1、两个相邻同胞元素的外边距发生重叠

两个相邻同胞元素的外边距必然会直接接触，所以一定会发生外边距重叠。
在这里插入图片描述

代码：

      <div class="father">
            <div class="son">子元素1</div>
            <div class="son">子元素2</div>
         </div>

.father{
   width:600px;
   height:600px;
   background-color:#tomato;
}
.son{
	widht:150px;
	height:150px;
	background-color:#bfa;
	margin:40px 0;
}

元素1和元素2是元素class="father"的两个相邻的同胞子元素，这两个元素都有大小为40px的上下外边距。理论上，元素1的下边框到元素2上边框的距离应该为元素1下外边距与元素2上外边距的距离应该为80px,但是，实际只有40px,发生了外边距折叠。

2、父元素的外边距的上外边距与其第一个子元素的上外边距折叠或者父元素的下外边距与其最后一个元素的下外边距折叠

当父元素的padding-top和border-top属性值为0时，就会导致父元素的上外边距与其第一个子元素的上外边距直接接触，从而导致两个外边距的折叠，效果上就像是子元素的上外边距被挤到父元素之外；同理，当父元素的padding-bottom和border-bottom属性值为0时，就会导致父元素的下外边距与其最后一个子元素的下外边距直接接触，从而导致外边距折叠。

在这里插入图片描述

代码：

    <div class="container">
        <div class="father">
            <div class="son">子元素1</div>
            <div class="son">子元素2</div>
        </div>
    </div>

    .container{
            border: 3px solid;
        }
    .father{
            width: 600px;
            height: 600px;
            background-color: tomato;
            margin:10px 0;  
        }

class=“father"的元素设置属性对 margin:10px 0;目的是为了让“.father”元素的上边框离“.container”元素内容区上边界的距离为10px
如下图所示:
在这里插入图片描述

但是，“.father”元素的上外边距与其子元素的上外边距直接接触，且子元素的上外边距的大小为40px,所以两个相邻外边距折叠之后，”.father"元素与其父元素上外边界的距离为40px,而子元素的外边距会“转移”到父元素的外面

如下图所示：
在这里插入图片描述

3、空元素也会出现外边距的直接接触

当空元素的border-top、padding-top、padding-bottom、border-bottom属性值都为0时，就会出现同一元素的上外边距与下外边距直接接触导致折叠。如下，div.container元素的height属性值由其内容决定，也就是由div.box元素的元素框的高度决定，根据元素的纵向格式化，div.box元素框的高度=margin-top+border-top+padding-top+height+padding-bottom+border-bottom+margin-bottom,则div.container元素的height属性值应该为150px,但是实际值是100px,因为div.box元素的的上下外边距发生了折叠。
在这里插入图片描述

代码：

<div class="container">
        <div class="box"></div>
</div>

.box{ 
        margin-top:50px; 
        margin-bottom: 100px; 
    }

三、解决外边距折叠问题

相邻外边距折叠的原因是两个外边距的直接接触，只要隔绝两个外边距避免其直接接触就能够解决问题
1、对于相邻的同胞块级元素，只要两个元素不在同一个BFC中，就可以避免两个相邻外边距的直接接触。如，让元素2处于div.bfc元素触发的BFC中，因为BFC是一个独立的渲染区域区域内外的渲染互不打扰，所以可以实现两个外边距的隔离。

<div class="father">
            <div class="son" id="son1">子元素1</div>
            <div class="bdc">
                <div class="son" id="son2">子元素2</div>
            </div>
        </div>

        #son1{
            margin-bottom: 150px;
            overflow: auto;
        }
        #son2{
            margin-top:150px;
        }
        .bfc{
            overflow: auto;
        }
    </style>

在这里插入图片描述
2、对于父元素和其子元素之间的的外边距折叠问题，可以给父元素添加相应方向相的boder或者padding来起到隔绝的作用，不过这会带来一些附加效果。最好用BFC将直接接触的外边距隔绝起来，也就是让父元素触发BFC。
在这里插入图片描述

<div class="container">
        <div class="father bfc">
            <div class="son" id="son1">子元素1</div>
            <div class="bfc">
                <div class="son" id="son2">子元素2</div>
            </div>
        </div>
    </div>

.container{
            border: 3px solid;
        }
        .father{
            width: 600px;
            height: 600px;
            background-color: tomato;
            margin:50px 0;  
            //div.father元素的上外边距是50px,也就是div.father元素的上边框到其容纳块的上内边界的距离是50px。
        }
        #son1{
            margin-bottom: 150px;
            margin-top:100px;
            //div#son1元素的上边框到其容纳块上内边界的距离为100px。
            overflow: auto;
        }
        #son2{
            margin-top:150px;
        }
        .bfc{
            overflow: auto;
        }