CSS面试题之margin塌陷问题

首先说一下什么是margin塌陷问题，就是我们子元素设置margin，其父盒子被设置成类似margin-top的效果

理想效果

<div class="outer">
  <div class="inner1"></div>
  <div class="inner2"></div>
</div>

我们想让inner1距离父容器各自10px，那么直接给inner设置margin:10px即可

   <style>
      * {
        margin: 0;
        padding: 0;
      }
      .outer {
        width: 400px;
        background-color: red;
      }
      .inner1 {
        margin: 10px;
        width: 100px;
        height: 100px;
        background-color: blue;
      }
      .inner2 {
        width: 100px;
        background-color: green;
        height: 100px;
      }
    </style>
    

但是最终效果并不是这样子，父元素被顶了10px的高度，这就是元素margin塌陷问题
解决办法
● 父元素设置padding
● 父元素设置border
● 父元素设置overflow:hidden（触发BFC）
第一种方式设置overflow:hidden

 .outer {
        width: 400px;
        background-color: red;
        overflow: hidden;
      }

第二种方式设置paddiing

.outer {
        width: 400px;
        background-color: red;
        padding: 1px;
      }

第三种方式设置border

.outer {
        width: 400px;
        background-color: red;
        border: 1px solid black;
      }