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

最新推荐文章于 2023-11-17 13:59:43 发布

code_mo

最新推荐文章于 2023-11-17 13:59:43 发布

阅读量3.2k

点赞数 1

分类专栏：前端文章标签： margin-top失效 margin

本文链接：https://blog.csdn.net/weixin_43441790/article/details/96631406

版权

前端专栏收录该内容

9 篇文章 0 订阅

订阅专栏

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>

代码给盒子1（蓝色）设置了下边距100px，盒子2（橘色）设置了，理论上这两个盒子相隔150px，打开网页发现不是这样的······实际上它们仅仅相隔了100px（只显示margin大盒子的边距）
在这里插入图片描述
解决情况一的方法：

尽量在父元素上padding-top ，需要注意尺寸的计算（加了padding-top之后需要考虑盒子的高）
如果子元素（盒子2）没有弹层时，可以在父元素上加 overflow:hidden，如果子元素有弹层的情况下，弹层将会被父元素遮挡住。

解决情况二的方法：

给父元素（盒子1）加绝对定位:position: relative;,给子元素（盒子2）加相对定位position: absolute;,设置之后如下：
在这里插入图片描述
问题解决啦！！！

code_mo

关注

1
点赞
踩
12

收藏

觉得还不错? 一键收藏
打赏
0
评论
margin-top失效的情况以及解决方法

margin-top失效的情况，以及解决方法在做练习是发现，将一个盒子在另外一个盒子中居中是，发现给在中间显示盒子加margin-top时失效了，结果是两个和都下移动了！！！<!DOCTYPE html><html> <head> <meta charset="utf-8" /> <title>margin异常的问题&lt...
复制链接

扫一扫