【CSS】margin（外边距）属性以及如何消除塌陷现象

最新推荐文章于 2025-04-03 23:29:26 发布

AM越.

最新推荐文章于 2025-04-03 23:29:26 发布

阅读量669

点赞数 5

文章标签： css 前端

本文链接：https://blog.youkuaiyun.com/2301_79982543/article/details/137789314

版权

本文介绍了在网页开发中遇到的‘塌陷现象’，即垂直方向margin不叠加的问题，通过示例展示了如何使用浮动和大盒子模型来避免margin塌陷，以及如何利用CSS进行布局调整。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

在实际开发中，人们已经很少使用表格等html标签，我们通常使用div标签加上padding属性与margin属性进行网页布局

代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<style type="text/css">
		/* p标签自带16px的外边距 */
		#box{
			width: 100px;
			height: 100px;
            
			margin: 20px 30px;
			/* 上下左右的分配和边框和内边距一样 */
		}
		
		
	</style>
	
	
	
	<body>
		<p></p>
		<div id="box">
			
		</div>
	</body>
</html>

无margin：

有margin：

通过两张图片对比，可以明显看出盒子外边距有所增加

注意：

^(*￣(oo)￣)^注意！！！！标准流中（没有什么浮动效果之类的），垂直方向的margin不叠加，以最大的为准，这叫做margin的塌陷现象

如何解决塌陷现象——浮动设置

效果：

可以看出，上下两边的距离是中间的1/2，这是因为浮动解决了margin的塌陷现象

代码：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<style type="text/css">
		/* p标签自带16px的外边距 */
		#box{
			width: 100px;
			border: solid #000000;
			overflow: hidden;
		}
		#box1{
			width: 100px;
			height: 100px;
			margin: 10px 0px ;
			background-color: #ADFF2F;
			float: left;
		}
		#box2{
			width: 100px;
			height: 100px;
			margin: 10px 0px ;
			background-color: aqua;
			float: left;
		}
		
		
		/* ^(*￣(oo)￣)^注意！！！！  标准流中（没有什么浮动效果之类的），垂直方向的margin不叠加，以最大的为准，这叫做margin的塌陷现象 */
		
	</style>
	
	
	
	<body>
		<p></p>
		<div id="box">
			<div id="box1">
				
			</div>
			<div id="box2">
			  	
			</div>
		</div>
		
	</body>
</html>