margin经常使用的场景（一）

1.margin的塌陷现象

标准文档流中，竖直方向的margin不叠加，以较大的为准。

Document

*{

margin: 0;

padding: 0;

}

div{

width: 200px;

overflow: hidden;

}

.p1{

width: 200px;

height: 100px;

background-color: orange;

margin-bottom: 40px;

}

.p2{

width: 200px;

height: 100px;

background-color: orange;

margin-top: 30px;

}

运行结果

此时可以看到第一个p标签和第2个p标签之间的距离只有40px,虽然第一个div的margin-bottom: 40px;第二个div的margin-top: 30px;。但是竖直方向上margin的值不会叠加，以较大为准，所以间距为40px。

这就是margin的塌陷现象。这种情况存在于标准流中。

如果不在标准流，比如盒子都浮动了，那么两个盒子之间是没有塌陷现象的：

设置两个p标签分别为float：left。此时2个p标签之间的距离就为70px。