边距溢出问题及解决方案

1、margin-top溢出问题描述：父元素margin-top被子元素的margin-top值所影响（假设父元素margin-top：0；子元素margin-top:50px;,视觉效果为父元素margin-top：50px; 子元素margin-top:0;）如图所示：

个人觉得这是一个父子元素外边距合并的bug

2、解决办法：

• 为父元素增加display:table;的伪类（推荐做法）

<style>
        .fu:before{
            content:"";
            display:table;
        }
        .fu{
            width: 200px;
            height: 200px;
            background: #00F7DE;
            margin-top: 10px;
        }
        .zi{
            width: 100px;
            height:100px;
            margin-top: 50px;
            background:#00ff00;
        }
</style>
<div class="fu">
    <div class="zi"></div>
</div>

• 为父元素设置border-top（缺点是改变了父元素的高度）
  

.fu{
    width: 200px;
    height: 200px;
    background: #00F7DE;
    margin-top: 10px;
    border-top:1px solid #fff;
}

• 为父元素设置display:table;（缺点是改变了父元素的display属性）
  

.fu{
    width: 200px;
    height: 200px;
    background: #00F7DE;
    margin-top: 10px;
    display:table;
}

• 通过为父元素设置上内边距来取代子元素的上外边距
  ​​​​​​