margin塌陷与合并问题

Posted 2020-12-27 oleolema

本文转自： 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塌陷要解决