子元素的margin-top为什么会影响父元素？

苏苏哇哈哈

已于 2022-11-17 09:38:04 修改

阅读量3.1k

点赞数 6

分类专栏： css 神奇的css 文章标签： css css3 html

于 2022-02-18 00:08:11 首次发布

本文链接：https://blog.csdn.net/qq_48085286/article/details/122974982

版权

css 同时被 2 个专栏收录

63 篇文章 8 订阅

订阅专栏

神奇的css

22 篇文章 7 订阅

订阅专栏

1.当你为子元素设置margin-top的时候，你会发现什么呢？

<style>
	body {
		padding: 0;
		margin: 0;
	}

	.b {
		width: 200px;
		height: 200px;
		border: 1px solid red;
	}

	.a {
		background-color: forestgreen;
		height: 300px;
		width: 220px;
	}
</style>
<body>
	<div class="a">
		<div class="b"></div>
	</div>
</body>

在这里插入图片描述
为子元素添加margin-top

.b {
	width: 200px;
	height: 200px;
	border: 1px solid red;
	margin-top: 90px;
}

在这里插入图片描述
可发现，子元素影响到了父元素，第一个子元素的margin-top会顶开父元素。该情况发生在父元素与该子元素直接木有直接的其他元素。

2. 什么原因呢

所有毗邻的两个或更多盒元素的margin将会合并为一个margin共享之。毗邻的定义为：同级或者嵌套的盒元素，并且它们之间没有非空内容、Padding或Border分隔。

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