给第一个子元素加margin-top，父元素会向下移动的解决办法

最新推荐文章于 2024-04-23 17:04:18 发布

以休伯利安的名义

最新推荐文章于 2024-04-23 17:04:18 发布

阅读量905

点赞数

CC 4.0 BY-SA版权

分类专栏：壮哉我大前端文章标签： css

本文链接：https://blog.csdn.net/m0_53610112/article/details/112806367

当给第一个子元素添加margin-top时，父元素会因margin外边距坍塌而向下移动。本文介绍了四种解决方案：1) 父元素设置overflow:hidden；2) 添加透明边框border:1px solid transparent；3) 使用浮动；4) 父元素添加padding-top:1px。这些方法旨在防止子元素的margin影响到父元素的位置。

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

四种方案

给第一个子元素设置margin-top上外边距时，父元素总会跟着向下移动。

<div id="parent">
    <div id="son"></div>
</div>
<style>
    body{
    
    
        margin: 0;
        padding: 0;
        background-color: grey;
    }
    #parent{
    
    
        width: 200px;
        height: 200px;
        background-color: red;
    }
    #son{
    
    
        width: 100px;
        height: 100px;
        background-color: green;
        margin-top: 50px;
    }
</style>

页面效果：
给第一个子元素加margin-top，父元素跟着向下移动
这是margin外边距坍塌导致的，按照css规范，两个相邻的元素之间的margin值会共用较大的那一个，而如果没有上边框或上内间距，嵌套的元素之间和同级的元素一样满足使用这个规范的条件，父元素会拥有子元素一样的上外边距。要解决这个问题其实也非常简单，这里给出四种不同的解决方法。