子元素设置margin-top,作用到了父元素

最新推荐文章于 2024-04-26 22:14:41 发布

cherryld

最新推荐文章于 2024-04-26 22:14:41 发布

阅读量1.1k

点赞数 2

分类专栏： css 文章标签： css css3

本文链接：https://blog.csdn.net/cherrylindan/article/details/109625578

版权

2 篇文章 0 订阅

订阅专栏

html部分

<div class="parent">
	<div class="child"></div>
</div>

css部分

.parent{
	width: 500px;
	height: 600px;
	background: pink;
}
.child{
	width: 200px;
	heihgt: 200px;
	background: green;
	margin-top: 20px;
}

页面运行效果
通过看效果可以看得出来， child设置margin-top, parent也跟着一起下移了，这是由于父元素跟子元素没有东西分割开（padding或border）就导致了父子两个元素的上边沿重合，公用了一个margin。（此边距合并只存在于普通文档流）

解决办法：

父元素做些样式修改

1，parent 设置 padding-top: 1px;
2，parent 设置 border: 1px solid transparent;
3，parent 设置 overflow: hidden；
4，parent 脱离普通文档流，绝对定位或浮动(position，float)。

关注