目录
非 VIP 用户可前往公众号回复“css”进行免费阅读
margin 的塌陷现象
在标准文档流当中，竖直方向上相邻元素的 margin 不会发生叠加，而是取两者中的较大值。
示例代码如下：
css:
<style type="text/css">
*{
margin: 0;
padding: 0;
}
.box{
width: 200px;
border: 1px solid orange;
}
.box1{
width: 200px;
height: 100px;
margin-bottom: 30px;
background-color: pink;
}
.box2{
width: 200px;
height: 100px;
margin-top: 40px;
background-color: skyblue;
}
</style> html:
<body>
<div class="box">
<div class="box1">box1</div>
<div class="box2">box2</div>
</div>
</body> 运行结果：
然而，当元素脱离标准文档流，例如当盒子都处于浮动状态时，两个盒子之间就
最低0.47元/天 解锁文章
扫一扫
1836
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
