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

作者：AllinToyou | 2024-04-16 07:30:11

踩

代码

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

原理解释：

先用一个大盒子将两个小盒子框起来，然后对小盒子进行设置，这样就可以实现非常规操作，同理，可以把大盒子尺寸变大，把盒子放在任何你想要的地方

今天的分享到这里就结束啦~~希望能帮到您！！

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/AllinToyou/article/detail/433030