css边距重叠的解决方案

**

css防止边距重叠的方法

**

今天整理了一下用css防止边距重叠的几种方法
先假设一组dom结构

<div class="parent">
    <div class="child">
    </div>
</div>

一般状况下，若是给子元素设置margin,就会产生这个属性对父元素也产生了一样的效果，然而
这其实不是咱们想要的结果，咱们只想对子元素设置margin，那么如今咱们应该怎么作呢？
（1） 给父元素设置边框

.parent { 
    width: 300px;       
    height: 300px;
    border: 1px solid #ccc;
}
.child {
    width: 200px;
    height: 200px;
    margin: 20px;
}

（2）给父元素添加padding

.parent {
    padding： 1px;
    width: 300px;
    height: 300px;
}
.child {
    width: 200px;
    height: 200px;
    margin: 20px;
}

（3）在子元素上方加一个有宽高的兄弟元素，记住是有宽高的。

<div class="parent">
     <div style="width: 20px;height: 20px;margin-top: "></div>
     <div class="child">
     </div>
</div>

（4）给父元素设置 overflow: hidden; 属性

.parent {
    overflow: hidden;
    width: 300px;
    height: 300px;
}
.child {
    width: 200px;
    height: 200px;
    margin: 20px;
}

（5）给子元素设置 display: inline-block；（若是子元素是行内元素或者行内块级元素则不会产生边距重叠的问题）

.parent {
    width: 300px;
    height: 300px;
} 
.child {
    width: 200px;
    height: 200px;
    margin: 20px; 
    display: inline-block;
}

（6）使子元素脱离文档流这个实现的方法有不少，浮动，绝对定位等，这里我就不作具体的解释了。
但愿能够能帮助到须要的人，若是你以为这个文章帮到你了，就麻烦动动小手点个赞吧！嘿嘿