前端H5面试题CSS：如何解决 margin“塌陷”？

置顶红嘴-蓝鹊

已于 2022-01-20 19:53:06 修改

阅读量875

点赞数 1

CC 4.0 BY-SA版权

分类专栏：前端H5面试题CSS 文章标签： css html css3

于 2022-01-07 20:27:11 首次发布

本文链接：https://blog.youkuaiyun.com/weixin_48475463/article/details/122371743

前端H5面试题CSS 专栏收录该内容

2 篇文章

订阅专栏

本文详细介绍了CSS中两种外边距塌陷的情况及其解决方案。一种是同级元素垂直排列时的外边距重叠问题，另一种是父子元素间的外边距塌陷。解决方法包括避免同时出现外边距、使用overflow:hidden、添加padding、设置position:fixed等。通过这些方法，可以有效地防止外边距塌陷带来的布局混乱。

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

一、外边距塌陷共有两种情况

①第一种情况：

两个同级元素，垂直排列，上面的盒子给 margin-bottom 下面的盒子给

margin-top，那么他们两个的间距会重叠，以大的那个计算。

解决这种情况的方法为：两个外边距不同时出现

②第二种情况：

两个父子元素，内部的盒子给 margin-top，其父级也会受到影响，同时产生

上边距，父子元素会进行粘连。

解决这种情况的方法为：父级添加一个 css 属性，overflow：hidden，禁止超出外边距重叠就是外边距塌陷（margin-collapse）

<style>
        * {
            margin: 0;
            padding: 0;
        }
        .box {
            width: 300px;
            height: 300px;
            background-color: pink;
            margin: 0 auto;
        }
        .box1 {
            width: 100px;
            height: 100px;
            background-color: red;
            margin-top: 100px;
            text-align: center;
            font: 18px/100px "楷体";
        }
</style>

解决方案：

1、为父盒子设置 border，为外层添加 border 后父子盒子就不是真正意义上的贴合（可以设置成透明：border：1px solid transparent）；

2、为父盒子添加 overflow：hidden；

3、为父盒子设定 padding 值；

4、为父盒子添加 position：fixed；

5、为父盒子添加 display：table；

6、利用伪元素给父元素的前面添加一个空元素

<style>
        * {
            margin: 0;
            padding: 0;
        }

        .box {
            width: 300px;
            height: 300px;
            background-color: pink;
            margin: 0 auto;

            /* 解决方案： */
            /* 1、为父盒子设置 border，为外层添加 border 后父子盒子就不是真正意义上的贴合（可 
                  以设置成透明：border：1px solid transparent）； */
            /* border: 1px solid transparent; */

            /* 2、为父盒子添加 overflow：hidden； */
            /* overflow: hidden; */

            /* 3、为父盒子设定 padding 值； */
            /* padding: 1px; */

            /* 4、为父盒子添加 position：fixed； */
            /* position: fixed; */

            /* 5、为父盒子添加 display：table； */
            /* display: table; */

        }

            /* 6、利用伪元素给父元素的前面添加一个空元素 */
        .box::before {
            content: '';
            display: table;
        }

        .box1 {
            width: 100px;
            height: 100px;
            background-color: red;
            margin-top: 100px;
            text-align: center;
            font: 18px/100px "楷体";
        }
    </style>