外边距塌陷问题

最新推荐文章于 2023-12-14 17:18:41 发布

mature星

最新推荐文章于 2023-12-14 17:18:41 发布

阅读量8.6k

点赞数 10

分类专栏： web前端文章标签： web前端盒子模型外边距塌陷

本文链接：https://blog.csdn.net/qq_24557303/article/details/77603317

版权

web前端专栏收录该内容

2 篇文章 0 订阅

订阅专栏

盒子模型&&外边距塌陷问题

注意，我是一个新人，一个前端新人，也是一个博客新人，所以写的不好，还请见谅哈，有错的话还请留言，这是我的第一篇博客，哈哈哈。

嵌套的盒子，直接给盒子设置垂直方向外边距的时候，会发生外边距塌陷。

举个例子：在嵌套关系的盒子模型中，一个父盒子里边嵌套一个子盒子，让子盒子在父盒子里边上下移动，而不影响整体布局。如下图，目的是让son box这个盒子能在father box里边移动，而不改变father box的大小以及father box在html页面中的位置。

代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style type="text/css">
		.father{
			width: 500px;
			height:500px;
			background: #aaa;
		}
		.son{
			width: 200px;
			height:200px;
			background: #c90;
		}
	</style>
</head>
<body>
	<div class="father">
		<div class="son"></div>
	</div>
</body>
</html>

效果如下

现在，我想让在灰盒子里边的黄盒子向下移动50px；大家可能会想到的是，在黄色盒子的margin-top为50px，那么效果是否是这样呢？代码只加了一行，如下：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style type="text/css">
		.father{
			width: 500px;
			height:500px;
			background: #aaa;
		}
		.son{
			width: 200px;
			height:200px;
			background: #c90;
			margin-top: 50px;
		}
	</style>
</head>
<body>
	<div class="father">
		<div class="son"></div>
	</div>
</body>
</html>

效果如下：