css解决网页重叠的方法：1、给父元素设置边框；2、给父元素添加padding；3、在子元素上方加一个有宽高的兄弟元素；4、给父元素设置“overflow: hidden;”属性等。
本教程操作环境：Windows7系统、HTML5&&CSS3版本，该方法适用于所有品牌电脑。
推荐：《css视频教程》
css解决网页边距重叠
下面给大家介绍用css防止边距重叠的几种方法。
立即学习“前端免费学习笔记（深入）”；
先假设一组dom结构
通常情况下，如果给子元素设置margin,就会产生这个属性对父元素也产生了同样的效果，然而
这其实不是我们想要的结果，我们只想对子元素设置margin，那么现在我们应该怎么做呢？
芒果商城系统GSHOP
下载
芒果系统GSHOP 纯静态商城系统，你还在为商城的优化而苦恼？GSHOP是全站纯静态商城系统，一键seo优化功能解决seo问题，自定义URL链接解决商城同质化问题；多页面显示：动态页、伪静态页面、纯静态页面增加收录，提升网站权重，提升流量等。安全稳定、功能强大的商城系统。1、芒果商城系统基于 php5.0开发，企业级应用。2、产品功能Ajax设计，响应速度更快，购物体验更好。3、全新密钥存放机制，
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、使子元素脱离文档流这个实现的方法有很多，浮动，绝对定位等，这里我就不做具体的解释了。
