详解css边距重叠的几种解决方案
来源：爱站网时间：2018-12-22编辑：网友分享
CSS网页布局中存在许多奇怪的问题，这些问题可能是浏览器错误或者我们对CSS属性缺乏理解，今天这篇文章是爱站技术频道小编和大家分享的详解css边距重叠的几种解决方案，一起来了解了解吧！
CSS网页布局中存在许多奇怪的问题，这些问题可能是浏览器错误或者我们对CSS属性缺乏理解，今天这篇文章是爱站技术频道小编和大家分享的详解css边距重叠的几种解决方案，一起来了解了解吧！
（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）在子元素上方加一个有宽高的兄弟元素，记住是有宽高的。
（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）使子元素脱离文档流这个实现的方法有很多，浮动，绝对定位等，这里我就不做具体的解释了。
以上就是详解css边距重叠的几种解决方案的全部内容，希望对大家的学习有所帮助，也希望大家多多支持爱站技术频道。
上一篇：简单介绍Web移动端布局
下一篇：CSS3弹性伸缩布局之box布局
