解决子div设置margin-top使父div也跟着向下移动的问题（外边距塌陷）

最新推荐文章于 2023-01-04 14:30:59 发布

茶一蛊

最新推荐文章于 2023-01-04 14:30:59 发布

阅读量1.2k

点赞数 2

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

本文链接：https://blog.csdn.net/qq_26905813/article/details/125893346

版权

css 专栏收录该内容

10 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
	</head>
	<style>
		* {
			padding: 0;
			margin: 0;
		}
		html,
		body {
			width: 100%;
			height: 100%;
		}		
	</style>
	<body>
		<div style="background-color: #1e5b61; width: 100%; height: 100%">
			<div style="width: 30%; height: 30%;margin-top: 5%; background-color: antiquewhite;font-size: 30px;">测试</div>
		</div>	
	</body>
</html>

在这里插入图片描述
父级元素内部有子元素，如果给子元素添加margin-top样式，那么父级元素也会跟着下来，造成外边距塌陷。
原理：
一个盒子如果没有上补白(padding-top)和上边框(border-top)，那么这个盒子的上边距会和其内部文档流中的第一个子元素的上边距重叠。
解决方案
.为父div设置overflow: hidden;
在这里插入图片描述