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

Alive_tree

于 2020-04-23 17:08:07 发布

阅读量348

点赞数

分类专栏： css3

本文链接：https://blog.youkuaiyun.com/Alive_tree/article/details/105710995

版权

css3 专栏收录该内容

3 篇文章

订阅专栏

本文探讨了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;
         }

效果
在这里插入图片描述