margin-top失效的情况以及解决方法

最新推荐文章于 2025-05-27 17:54:44 发布

原创最新推荐文章于 2025-05-27 17:54:44 发布 · 3.3k 阅读

12 ·

CC 4.0 BY-SA版权

文章标签：

#margin-top失效 #margin

前端专栏收录该内容

9 篇文章

订阅专栏

本文探讨了CSS中出现的外边距合并现象，包括父子元素间的垂直外边距合并及相邻元素间的外边距合并，并提供了两种常见情况的解决方案。

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

margin-top失效的情况，以及解决方法

在做练习是发现，将一个盒子在另外一个盒子中居中是，发现给在中间显示盒子加margin-top时失效了，结果是两个和都下移动了！！！

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>margin异常的问题</title>
		<style type="text/css">
			*{
				margin: 0;
				padding: 0;
			}
			.box1{    /*父元素（盒子1）*/
				position: relative;
				width: 200px;
				height: 200px;
				background: skyblue;
			}
			.box2{    /*子元素（盒子2）*/
				width: 100px;
				height: 100px;
				background: #f60;
				margin-left: 50px;
				margin-top: 50px;
			}
		</style>
	</head>
	<body>
		<div class="box1">
			<div class="box2">盒子2</div>
		</div>
	</body>
</html>

代码就是想让盒子2居中显示在盒子1的里面，于是给盒子2加上margin-left: 50px;margin-top: 50px;，打开网页查看，发现并不是所想的那样······
在这里插入图片描述
可以看见，不只是盒子2（橘色盒子）向下移动了50px，盒子1(蓝色)的盒子也向下移动了50px！这是为什么呢？查阅资料在W3school上是这样解释的:
两个垂直外边距相遇时，他们将形成一个外边距。合并之后的外边距的高度等于2个发生合并的外边距的高度中的较大值。

会出现外边距合并的异常情况如下;
情况一：当一个元素包含在另一个元素中时，它们的上或下外边距也会发生合并。如上面的情况。
情况二：当一个元素出现在另一个元素上面时，第一个元素的下外边距与第二个元素的上外边距会发生合并，此时取边距大那个盒子的边距作为边距。（盒子1的边距为200px,盒子2的边距为100px，那么他们的边距取200px），如下面的情况

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>上下盒子边距异常</title>
		<style type="text/css">
			*{
				margin: 0;
				padding: 0;
			}
			.box1{
				width: 200px;
				height: 200px;
				background: skyblue;
				margin-bottom: 100px;
			}
			.box2{
				width: 200px;
				height: 200px;
				background: #f60;
				margin-top: 50px;
			}
		</style>
	</head>
	<body>
		<div class="box1"></div>
		<div class="box2"></div>
	</body>
</html>