CSS---margin-top塌陷理解_css高度margin空间塌陷怎么理解-CSDN博客

本文链接：https://blog.csdn.net/qq_43766304/article/details/104719458

写给自己

margin-top塌陷
解决办法：
1外部盒子设置一个边框
2.外面的盒子设置overflow:hidden;
3.外面的使用伪元素clearfix，国际通用

在这里插入图片描述

理解问题在哪里：

<!DOCTYPE html>
<html lang="zh">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta http-equiv="X-UA-Compatible" content="ie=edge">
	<title>CSS---margin-top塌陷理解</title>
	<style type="text/css">
		.con{
			width: 300px;
			height:300px;
			background-color: blue;
			
		}
		
		.box{
			width: 200px;
			height: 100px;
			background-color: aqua;
			margin-top: 100px;
			
		}
	</style>
</head>
<body>
	<div class="con">
		<div class="box">
		
		</div>
	</div>
	<p>注释：margin-top塌陷，是一个bug <br>
	在两个盒子嵌套时候，内部的盒子设置的margin-top会加到外边的盒子上，导致内部的盒子margin-top设置失败<br>
	</p>
</body>
</html>

解决办法

写给自己：
在直接使用下面这个代码时，要注意注释位置，解掉代码注释
运行代码时要把文字加上注释
在这里插入图片描述

<!DOCTYPE html>
<html lang="zh">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta http-equiv="X-UA-Compatible" content="ie=edge">
	<title>CSS---margin-top塌陷理解</title>
	<style type="text/css">
		
		/* .clearfix::before{              第三种解决办法：外面的使用伪元素clearfix，国际通用
			content: "";
			display: table;
		} */
		.con{
			width: 300px;
			height:300px;
			background-color: blue;
		
			/* border: 1px solid crimson;  第一种解决办法：外面的盒子设置一个边框， */
			/* overflow: hidden;           第二种解决办法：外面的盒子设置overflow:hidden;*/
			
		}
		
		.box{
			width: 200px;
			height: 100px;
			background-color: aqua;
			margin-top: 100px;
			
		}
	</style>
</head>
<body>
	<div class="con clearfix" >   <!-- 配合CSS样式中clearfix-->
		<div class="box">
		
		</div>
	</div>
	
</body>
</html>