解决子元素设置margin-top使父元素也跟着向下移动的问题

卿本无忧

已于 2023-11-20 14:56:21 修改

阅读量831

点赞数 2

分类专栏： css HTML 文章标签：前端

于 2023-07-10 16:20:34 首次发布

本文链接：https://blog.csdn.net/qq_39998026/article/details/131633965

版权

css 同时被 2 个专栏收录

9 篇文章 1 订阅

订阅专栏

HTML

2 篇文章 0 订阅

订阅专栏

文章介绍了CSS布局中常见的外边距塌陷问题，当子元素设置margin-top时，可能会引起父元素位置的变动。文章详细解释了这个问题的原理，并提供了七种解决方案，包括设置父元素的padding-top、border、overflow:hidden，以及对元素进行浮动和绝对定位等方法。

摘要由CSDN通过智能技术生成

先看代码：

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8">
		<meta http-equiv="X-UA-Compatible" content="IE=edge">
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<title>解决子元素设置margin-top使父元素也跟着向下移动的问题</title>
		<style>
			* {
				margin: 0;
				padding: 0;
			}

			html,
			body {
				width: 100%;
				height: 100%;
			}

			.parent {
				background-color: skyblue;
				width: 100%;
				height: 100%;
			}

			.child {
				width: 50%;
				height: 50%;
				margin-top: 50px;
				background-color: pink;
			}
		</style>
	</head>
	<body>
		<div class="parent">
			<div class="child">
				这是子元素的内容
			</div>
		</div>
	</body>
</html>

以为的运行效果：

实际上的运行效果：

子元素设置margin-top，父元素也跟着下移，造成外边距塌陷。

原理：

一个盒子如果没有上补白(padding-top)和上边框(border-top)，那么这个盒子的上边距会和其内部文档流中的第一个子元素的上边距重叠。

解决办法：

1、给父元素设置padding-top

.parent {
	background-color: skyblue;
	width: 100%;
	height: 100%;
	box-sizing: border-box;
    padding-top: 1px;
}

2、为父元素设置border

.parent {
	background-color: skyblue;
	width: 100%;
	height: 100%;
	box-sizing: border-box;
	border: 1px solid transparent;
}

3、为父元素设置overflow: hidden;（推荐使用这种）

.parent {
	background-color: skyblue;
	width: 100%;
	height: 100%;
	overflow: hidden;
}

4、为父元素设置浮动

.parent {
	background-color: skyblue;
	width: 100%;
	height: 100%;
	float: left;
}

5、为子元素设置浮动

.child {
	width: 50%;
	height: 50%;
	margin-top: 50px;
	background-color: pink;
	float: left;
}

6、为父元素设置绝对定位

.parent {
	background-color: skyblue;
	width: 100%;
	height: 100%;
	position: absolute;
}

7、为子元素设置绝对定位

.child {
	width: 50%;
	height: 50%;
	margin-top: 50px;
	background-color: pink;
	position: absolute;
}

卿本无忧

关注

2
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录