给子元素加margin-top在父元素上自作用解决办法

本文探讨了CSS中margin-top属性导致的Margin Collapsing现象,即子元素的顶部外边距与父元素的顶部外边距重叠的问题,并提供了三种解决方案:通过设置父元素的overflow为hidden,添加padding,或添加border。

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

我们在随便给一个div加margin-top的时候会给父元素起作用。类似的margin-left就不会。
栗子:
html

<div class=box>
         <div class="son"></div>
     </div>

css

.box{
            width:200px;
            height: 200px;
            background: lightsalmon;
        }
        .son{
            width:100px;
            height: 100px;
            background: lightblue;
            margin-left:50px;
            margin-top: 50px;
        }

产生的结果就是
在这里插入图片描述
原因是
一个盒子如果没有上补白(padding-top)和上边框(border-top),那么这个盒子的上边距会和其文档流中的第一个子元素的上边距重叠。

解决方法
方法一、给父元素的样式加 overflow=hidden

.box{
            width:200px;
            height: 200px;
            background: lightsalmon;
            overflow: hidden;
        }

方法二

.box{
            width:200px;
            height: 200px;
            background: lightsalmon;
            padding: 1px;
        }

方法三

.box{
             width:200px;
             height: 200px;
             background: lightsalmon;
             border: 1px solid white;
         }

效果
在这里插入图片描述

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值