margin塌陷问题与合并问题

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塌陷要解决