CSS中标签元素外边距合并问题（父子级）
在CSS设计中，常常遇到块级元素的外边距合并问题的出现，例如外层div嵌套内层div，为内部div设置上边距时，想要产生和外层div有一定的距离，从而达到页面的设计效果，但是由于外边距合并的产生，外层div会因为内层div设置上边距，会随着内层div产生一个共同的外边距，并没有达到理想的效果。这就是父子级元素外边距合并问题现象。（即父元素会随着子元素一起拥有外边距）
正常内外层div设定代码以及运行图：
<head>
<meta charset="UTF-8">
<title>外边距合并-父子级</title>
<style>
.outer{
width: 200px;
height: 200px;
background-color: pink;
}
.inner{
width: 100px;
height: 100px;
background-color: red;
}
</style>
</head>
<body>
<div class="outer">
<div class="inner"></div>
</div>
</body>
</html>
无外边距下的元素显示：
当为子元素inner添加margin-top=20px;之后，可以清楚的看到父元素会随着子元素一起拥有外边距，如下图所示：
如图上添加了外边距后，并没有达到想要的效果，如下有7种方法解决父子级外边矩合并问题。
- 给父元素添加overflow:hidden;
.outer{
overflow:hidden;
}
运行后结果如下图所示
- 把父元素设置为IE盒子，然后加padding
.outer{
box-sizing: border-box;
padding-top: 50px;
}
运行后结果如下图所示
- 给父元素加上边框
.outer{
border:1px solid red;
}
运行后结果如下图所示
- 给父元素或者本身加上绝对定位
position: absolute;
运行后结果如下图所示
- 给父元素或者本身加上固定定位
position: fixed;
- 给父元素或者本身加上浮动属性float
float:left;
- 给父元素或者本身加上display:inline-block
display: inline-block;
扫一扫
2万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
