父盒子跟随子盒子margin-top移动问题

最新推荐文章于 2022-11-28 21:30:12 发布

敲代码有瘾

最新推荐文章于 2022-11-28 21:30:12 发布

阅读量1.3k

点赞数 6

本文链接：https://blog.csdn.net/weixin_45786214/article/details/106297864

版权

问题：

当我们想给子元素设置margin-top时，发现子元素没有出现上外边距的效果，反而是父元素出现了上外边距的效果。
在这里插入图片描述

原因

根据规范，一个盒子如果没有上补白(padding-top)和上边框(border-top)，那么这个盒子的上边距会和其内部文档流中的第一个子元素的上边距重叠。
说白点就是：父元素的第一个子元素的上边距margin-top如果碰不到有效的border或者padding.就会不断一层一层的找自己父元素。直到找到父元素有有效的padding或border为止。

解决方法

1.给父盒子设置padding-top

2.给父盒子设置border-top

3.给父盒子设置overflow: hidden

三种方法都可解决问题，一般推荐第三种，给父元素设置overflow：hidden
在这里插入图片描述

实例代码：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>父盒子跟随子盒子margin-top移动问题</title>
	<style>
		*{margin: 0;padding:0;}
		.box1{
			width: 100%;
			height: 300px;
			background-color: #000;
			padding-top: 1px; // 第一种
			border-top: 1px solid #ccc; // 第二种
			overflow: hidden; // 第三种
		}
		.box1 .innerbox1{
			width: 1200px;
			height: 150px;
			margin: 0 auto;
			background-color: red;
			margin-top: 20px;
		}
	</style>
</head>
<body>
	<div class="box1">
		<div class="innerbox1">子盒子</div>
	</div>
</body>
</html>