跳到主要内容

认识

2023年02月27日
柏拉文
越努力，越幸运

一、认识​

两个块级元素的上外边距上外边距 (margin-top)和下外边距 (margin-bottom)可能会合并（折叠）为一个外边距，其大小会取其中外边距值大的那个，这种行为就是外边距折叠。需要注意的是，浮动的元素和绝对定位这种脱离文档流的元素的外边距不会折叠。重叠只会出现在垂直方向。

二、规则​

折叠合并后外边距的计算规则如下:

  • 如果所有参与折叠的外边距都为正: 折叠后的外边距的值为最大的正边距的值

  • 如果所有参与折叠的外边距都为负: 折叠后的外边距的值为最小的负边距的值

  • 如果参与折叠的外边距中包含负值: 折叠后的外边距的值为最大的正边距与最小的负边距之和

2.1 如果所有参与折叠的外边距都为正​

如果所有参与折叠的外边距都为正: 折叠后的外边距的值为最大的正边距的值

实时编辑器
function Test(props) {
    const divStyle1 = {
        width: "200px",
        height: "200px",
        marginBottom: "30px",
        backgroundColor: "red",
    }
    const divStyle2 = {
        width: "200px",
        height: "200px",
        marginTop: "40px",
        backgroundColor: "blue",
    }
    
    return (
        <div>
        <div style={ divStyle1 }></div>
        <div style={ divStyle2 }></div>
        </div>
    );
}
结果
Loading...

如上图所示: 如果所有参与折叠的外边距都为正, 一个为30px, 一个为40px, 折叠后的外边距的值为最大的正边距的值 40px

2.2 如果所有参与折叠的外边距都为负​

如果所有参与折叠的外边距都为负: 折叠后的外边距的值为最小的负边距的值

实时编辑器
function Test(props) {
    const divStyle1 = {
        width: "200px",
        height: "200px",
        marginBottom: "-30px",
        backgroundColor: "red",
    }
    const divStyle2 = {
        width: "200px",
        height: "200px",
        marginTop: "-40px",
        backgroundColor: "blue",
    }
    
    return (
        <div>
        <div style={ divStyle1 }></div>
        <div style={ divStyle2 }></div>
        </div>
    );
}
结果
Loading...

如上图所示: 如果所有参与折叠的外边距都为负, 一个为-30px, 一个为-40px, 折叠后的外边距的值为最小的负边距的值 -40px

2.3 如果参与折叠的外边距中包含负值​

如果参与折叠的外边距中包含负值: 折叠后的外边距的值为最大的正边距与最小的负边距之和

实时编辑器
function Test(props) {
    const divStyle1 = {
        width: "200px",
        height: "200px",
        marginBottom: "-30px",
        backgroundColor: "red",
    }
    const divStyle2 = {
        width: "200px",
        height: "200px",
        marginTop: "40px",
        backgroundColor: "blue",
    }
    
    return (
        <div>
        <div style={ divStyle1 }></div>
        <div style={ divStyle2 }></div>
        </div>
    );
}
结果
Loading...

如上图所示: 如果参与折叠的外边距中包含负值, 一个为-30px, 一个为40px, 折叠后的外边距的值为最大的正边距与最小的负边距之和, 所以折叠的边距为10px

三、形成与解决​

有三种情况会形成外边距重叠:

  1. 空的块级元素: 当一个块元素上边界margin-top 直接贴到元素下边界margin-bottom时也会发生边界折叠。这种情况会发生在一个块元素完全没有设定边框border、内边距padding、高度height、最小高度min-height 、最大高度max-height 、内容设定为 inline 或是加上clear-fix的时候。

  2. 同一层相邻元素之间: 相邻的两个元素之间的外边距重叠

  3. 没有内容将父元素和后代元素分开: 如果没有边框border，内边距padding，行内内容，也没有创建块级格式上下文或清除浮动来分开一个块级元素的上边界margin-top 与其内一个或多个后代块级元素的上边界margin-top；或没有边框，内边距，行内内容，高度height，最小高度min-height或 最大高度max-height 来分开一个块级元素的下边界margin-bottom与其内的一个或多个后代后代块元素的下边界margin-bottom，则就会出现父块元素和其内后代块元素外边界重叠，重叠部分最终会溢出到父级块元素外面。