呦呦呦，不会还有人不会解决css中的外边距塌陷吧-CSDN博客

本文链接：https://blog.csdn.net/weixin_61855876/article/details/131903718

如何去解决外边距塌陷

满足以下条件就会产生外边距塌陷现象：

1. 子元素在父元素里面

<head>
 <style>
     nav{
         width: 400px;
         height: 300px;
         background-color: red;
     }
     .div1{
         width: 300px;
         height: 200px;
         background-color: green;
     }
 </style>
</head>
<body>
 <nav>
     <div class="div1"></div>
 </nav>
</body>

2.子元素中有margin-top或者margin-bottom值

<head>
    <style>
        nav{
            width: 400px;
            height: 300px;
            background-color: red;
            /* 外边距向下移动50px，由于父元素有继承性，达不到我们要的效果 */
            margin-top: 50px;
        }
        .div1{
            width: 300px;
            height: 200px;
            background-color: green;
        }
    </style>
</head>
<body>
    <nav>
        <div class="div1"></div>
    </nav>
</body>

解决方案：

第一种：给父元素增加内边距padding值

<head>
    <style>
        nav{
            width: 400px;
            height: 300px;
            background-color: red;
            padding: 10px;
        }
        .div1{
            width: 300px;
            height: 200px;
            background-color: green;
        }
    </style>
</head>
<body>
    <nav>
        <div class="div1"></div>
    </nav>
</body>

效果：
给父元素增加内边距padding值

第二种：父元素增加边框border值

<head>
    <style>
        nav {
            width: 400px;
            height: 300px;
            background-color: red;
            border: 5px solid blue;
        }
        .div1 {
            width: 300px;
            height: 200px;
            background-color: green;
        }
    </style>
</head>

<body>
    <nav>
        <div class="div1"></div>
    </nav>
</body>

</html>

效果：
父元素增加边框border值

第三种：父元素增加overflow：hidden

<head>
    <style>
        nav {
            width: 400px;
            height: 300px;
            background-color: red;
            overflow:hidden;
        }
        .div1 {
            width: 300px;
            height: 200px;
            background-color: green;
        }
    </style>
</head>

<body>
    <nav>
        <div class="div1"></div>
    </nav>
</body>

</html>

第四种：给父元素或者子元素增加浮动，让其脱离标准流都可以

<head>
    <style>
        nav {
            width: 400px;
            height: 300px;
            background-color: red;
            float: left;
        }

        .div1 {
            width: 300px;
            height: 200px;
            background-color: green;
            float: right;
        }
    </style>
</head>

<body>
    <nav>
        <div class="div1"></div>
    </nav>
</body>

</html>

效果:
给父元素或者子元素增加浮动

第五种：将父元素转变为行内块元素，display：inline-block

<head>
    <style>
        nav {
            width: 400px;
            height: 300px;
            background-color: red;
            display:inline-block;
        }
        .div1 {
            width: 300px;
            height: 200px;
            background-color: green;
        }
    </style>
</head>

<body>
    <nav>
        <div class="div1"></div>
    </nav>
</body>

</html>

第六种：给父元素或者子元素定位都可以，原理同样是使其脱离标准流，不过只能用绝对定位和固定定位

<head>
    <style>
        nav {
            width: 400px;
            height: 300px;
            background-color: red;
            position: relative;
        }
        .div1 {
            width: 300px;
            height: 200px;
            background-color: green;
            position: absolute;
            left: 50px;
            top: 20px;
        }
    </style>
</head>
<body>
    <nav>
        <div class="div1"></div>
    </nav>
</body>
</html>

效果：
给父元素或者子元素定位都可以

第七种：给父盒子增加flex或者inline-flex

<head>
    <style>
        nav {
            width: 400px;
            height: 300px;
            background-color: red;
            flex:inherit;
        }
        .div1 {
            width: 300px;
            height: 200px;
            background-color: green;
            margin-left: 20px;
        }
    </style>
</head>
<body>
    <nav>
        <div class="div1"></div>
    </nav>
</body>
</html>