margin塌陷与合并问题

Posted oleolema

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了margin塌陷与合并问题相关的知识,希望对你有一定的参考价值。

本文转自: https://blog.csdn.net/Sunshineanl/article/details/70767277

margin塌陷问题和合并问题都只对垂直方向有效

  1. margin塌陷问题

    这个问题是一个经典的浏览器内核问题。具体表现是当两个元素嵌套到一起时,外层盒模型的margin-top取两个元素中margin-top较大的值。

    因为在正常的情况下内层元素是相对于外层元素进行移动,但是这时内层元素却相对于整个文档进行移动,好像外层元素没有“棚顶”一样,因此叫margin塌陷问题。

    margin塌陷问题触发示例:

    <div class = "wrapper">
        <div class = "content"></div>
    </div>
    
    <!--css代码-->
    .wrapper{
        width:200px;
        height:200px;
        background-color:red;
        margin-top:100px;
    }
    .content{
        width:100px;
        height:100px;
        background-color:green;
        margin-top:150px;
    
        <!--此时的margin-top为150px。-->
    }

    我们可以看到:此时的外层元素相对于整个文档的 margin-top = 150px;

    margin塌陷问题解决方法:

    1、给外层元素认为加一个“棚顶”:border。

    这种方法虽然能够解决问题,但是在日常开发中我们不使用它,因为他在外观上对元素进行了改变。

    2、bfc–block format context 块级格式化上下文

    每一个元素都是一个盒子,每一个盒子都符合一定的渲染规则。我们可以通过触发bfc方式,让特定盒子里的渲染规则发生变化。我们要给外层元素加一个特定属性来触发bfc来解决margin塌陷问题。触发bfc的方式有以下四种,我们可以根据实际的需求采用不同的方法。

    overflow:hidden;
    
    display:inline-block;
    
    position:absolute;
    
    float:left;

    2.margin合并问题

    具体表现为两个元素并列时,两者相隔的外边距取的是两者所设置margin的最大值。

    margin合并问题触发示例:

        <div class = ‘box1‘>box1</div>
        <div class = ‘box2‘>box2</div>
    
    
    
        <!--css代码-->
        .box1{
            background-color:red;
            margin-bottom:100px;
        }
        .box2{
            background-color:blue;
            margin-top:150px;
            <!--此时两者相隔的外边距为下面的box2所设置的margin-top:150px。-->
        }

    margin合并问题解决办法:

    我们仍然用bfc来解决。可以给其中一个元素包起来,在外层元素中设置bfc渲染规则。此时这个元素的渲染规则就改变了,就能够解决这个问题。

    一般margin合并不解决,margin塌陷要解决

以上是关于margin塌陷与合并问题的主要内容,如果未能解决你的问题,请参考以下文章

外边距塌陷 margin collapsing

盒子模型的塌陷

盒子模型margin塌陷

margin塌陷与BFC总结

margin塌陷问题及解决

css中margin-top的两个问题