margin塌陷现象

什么是margin的塌陷现象?

1、在标准的文档流中竖直方向的margin值不会叠加它会取较大的值

2、横着方向是没有margin的塌陷现象

3、浮动元素它是没有margin的塌陷现象的

<div class="box">
	<div class="div1"></div>
	<div class="div2"></div>
</div>
<style type="text/css">
	.box{
		width: 100px;
		border: 5px solid #000;
		overflow: hidden;
	}
	.box div{
		width: 100px;
		height: 100px;
	}
	.div1{
		background-color: #f00;
		margin-bottom: 20px;
	}
	.div2{
		background-color: #0f0;
		margin-top: 40px;
	}
	.div1,.div2{
		float: left;
	}
</style>

<!-- <span>意蕴隽永｜总书记点赞北京冬奥“名场面”</span><span>上海最大方舱医院建设纪实：争分夺秒的“四叶草”</span>
<style type="text/css">
	span:nth-child(1){
		margin-right: 20px;
		background-color: #f00;
	}
	span:nth-child(2){
		margin-left: 20px;
		background-color: #0f0;
	}
</style> -->

转载请注明：大灰牛博客 » margin塌陷现象