外边距塌陷如何解决

最新推荐文章于 2024-08-26 22:59:32 发布

加勺孜然

最新推荐文章于 2024-08-26 22:59:32 发布

阅读量78

点赞数

分类专栏： HTML-CSS 文章标签： html css 前端 html5 css3

本文链接：https://blog.csdn.net/weixin_72431184/article/details/130712193

版权

HTML-CSS 专栏收录该内容

16 篇文章 0 订阅

订阅专栏

文章探讨了在CSS布局中，由于父子级标签间的外边距导致的父级元素位置下移问题。提出了几种解决方案，包括取消子级外边距并使用父级padding，设置父级overflow为hidden，以及使用父级的border来避免塌陷。这些方法可以有效地防止因子元素外边距而影响整体布局。

摘要由CSDN通过智能技术生成

场景：父子级的标签，子级的添加上外边距会产生塌陷问题。

现象：导致父级一起向下移动。

<style>
    .father{
        width:300px;
        height:300px;
        background-color:pink;
    }
    .son{
        width:100px;
        height:100px;
        background-color:#000;
        margin-top:50px;
    }
</style>

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

解决方法：

取消子级margin，父级设置padding

<style>
    .father{
        width:300px;
        height:300px;
        background-color:pink;
        padding-top:50px;
        box-sizing:border-box;
    }
    .son{
        width:100px;
        height:100px;
        background-color:#000;
       /* margin-top:50px; */
    }
</style>

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

父级设置overflow：hidden

<style>
    .father{
        width:300px;
        height:300px;
        background-color:pink;
        overflow:hidden;
    }
    .son{
        width:100px;
        height:100px;
        background-color:#000;
        margin-top:50px;
    }
</style>

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

父级设置border-top

<style>
    .father{
        width:300px;
        height:300px;
        background-color:pink;
        border-top:1px solid pink;
    }
    .son{
        width:100px;
        height:100px;
        background-color:#000;
        margin-top:50px;
    }
</style>

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