水平方向不会出现margin坍塌
今天在写代码过程中,解决了一个小问题,代码如下。
在.first的div中设置margin-top,效果却是和父div设置margin-top一样,网上又搜了答案总结一下
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<style type="text/css">
.main{height: 400px;width: 200px;background: yellow;}
.first{width: 100px;height: 100px;background: red;margin-bottom: 50px;margin-top: 100px;margin-right: 0px}
.second{width: 100px;height: 100px;background: black;margin-top: 100px}
</style>
</head>
<body>
<div class="main">
<div class="first"></div>
<div class="second"></div>
</div>
</body>
</html>
解决办法:
- 在父层div加上:overflow:hidden;
- 把margin-top外边距改成padding-top内边距 ;
- 父元素产生边距重叠的边有不为 0 的 padding 或宽度不为 0 且 style 不为 none 的 border。
父层div加: padding-top: 1px;或者border:1px solid black - 让父元素生成一个 block formating context,以下属性可以实现
- float: left/right
- position: absolute
- display: inline-block/table-cell(或其他 table 类型)
- overflow: hidden/auto
父层div加:position: absolute;