给子元素给了margin-top.父级元素也跟着掉下来了怎么办?

本文深入探讨了CSS中Margin折叠的现象及其原因,当一个盒子没有上补白和上边框时,其上边距可能与其内部子元素的上边距重叠。文章提供了多种解决策略,包括使用overflow:hidden、生成内容、浮动、边框、padding-top等方法。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

我们想实现这样的效果:
在这里插入图片描述
代码:
在这里插入图片描述
但是,很不幸,结果是这样的,父元素跟着子元素向下移动了20像素
在这里插入图片描述
外层的父元素跟着子元素莫名其妙下移了20像素

原理是什么呢?
嵌套的元素也共享Margin
一个盒子如果没有上补白(padding-top)和上边框(border-top),那么这个盒子的上边距会和其内部文档流中的第一个子元素的上边距重叠。

解决办法:
1、为父元素添加overflow:hidden;样式即可(完美)
2、内容生成(推荐)。代码如下:
element(父元素):before{
  content:’’;
  display:table;
}
3、为父元素或者子元素声明浮动(float:left;可用)
4、为父元素添加border(border:1px solid transparent可用)
5、修改父元素的高度,增加padding-top样式模拟(padding-top:1px;常用)
6、父元素或子元素使用浮动或者绝对定位(浮动或绝对定位不参与margin的折叠)

评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值