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

最新推荐文章于 2024-04-26 16:52:43 发布

AM越.

最新推荐文章于 2024-04-26 16:52:43 发布

阅读量527

点赞数 5

文章标签： css 前端

本文链接：https://blog.csdn.net/2301_79982543/article/details/137789314

版权

在实际开发中，人们已经很少使用表格等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>