margin塌陷现象

最新推荐文章于 2022-04-15 12:08:47 发布

lwz4070

最新推荐文章于 2022-04-15 12:08:47 发布

阅读量622

点赞数 1

本文链接：https://blog.csdn.net/lwz4070/article/details/81369133

版权

maigin塌陷现象是指：当两个盒子在垂直方向上设置margin值时，会出现一个有趣的塌陷现象。

margin小的会陷入到margin大的盒子中，两个盒子之间的距离以大的盒子的margin为准。

只有垂直方向会发生塌陷现象，水平方向上不会发生塌陷，只会累加。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
	<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
	<style type="text/css">
     .box01{
     	height:200px;
     	width: 200px;
     	background: #0ff;
     	margin-bottom: 40px;
     }
     .box02{
     	height:200px;
     	width: 200px;
     	background: #0f0;
     	margin-top: 20px;
     }
   
     .box03{
     	height:200px;
     	width: 200px;
     	float: left;
     	margin-right:40px;
     	background: #0ff;
     }
     .box04{
     	height:200px;
     	width: 200px;
     	float: left;
     	margin-left: 20px;
     	background: #0f0;
     }
	</style>
	<title>盒子塌陷</title>
</head>
<body>
	<div class=box01>
	北京行政副中心北部路网将重构
踏青扫墓高峰到来139条公交增运力
副中心污水全处理重点河道将基本还清
北京开展房地产经纪机构专项执法检查
从国务院批复看中国各个城市的真实排名
北京市气象局举行气象科普馆开馆仪式
</div>
	<div class="box02">
     北京行政副中心北部路网将重构
踏青扫墓高峰到来139条公交增运力
副中心污水全处理重点河道将基本还清
北京开展房地产经纪机构专项执法检查
从国务院批复看中国各个城市的真实排名
北京市气象局举行气象科普馆开馆仪式
	</div>
 <div>
	<div class="box03">
	北京行政副中心北部路网将重构
踏青扫墓高峰到来139条公交增运力
副中心污水全处理重点河道将基本还清
北京开展房地产经纪机构专项执法检查
从国务院批复看中国各个城市的真实排名
北京市气象局举行气象科普馆开馆仪式
</div>
	<div class="box04">
     北京行政副中心北部路网将重构
踏青扫墓高峰到来139条公交增运力
副中心污水全处理重点河道将基本还清
北京开展房地产经纪机构专项执法检查
从国务院批复看中国各个城市的真实排名
北京市气象局举行气象科普馆开馆仪式
	</div>
	</div>
</body>
</html>

效果图：

如图:box01设置了margin-bottom:40px, box02设置了margin-top:20px，可是box01和box02两个盒子垂直距离只有40px，说明box2陷入到box1中去了。而box03设置了margin-right:40px,box04设置了margin-left:20px,两个盒子之间的距离为60px，说明水平方向上盒子不会发生塌陷，只会累加。

margin塌陷解决方法：

（1）为父盒子设置border，为外层添加border后父子盒子就不是真正意义上的贴合。

（2）为父盒子添加overflow：hidden；

（3）为父盒子设定padding值。

lwz4070

关注

1
点赞
踩
4

收藏

觉得还不错? 一键收藏
0
评论
margin塌陷现象

maigin塌陷现象是指：当两个盒子在垂直方向上设置margin值时，会出现一个有趣的塌陷现象。 margin小的会陷入到margin大的盒子中，两个盒子之间的距离以大的盒子的margin为准。只有垂直方向会发生塌陷现象，水平方向上不会发生塌陷，只会累加。&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"...
复制链接

扫一扫