外边距塌陷

Love The Way You Lie 2023-01-03 15:28 229阅读 0赞

#### 什么是外边距塌陷？ ####

外边距塌陷也称为外边距合并，是指两个在正常流中相邻（兄弟或父子关系）的块级元素的外边距，组合在一起变成单个外边距，不过只有上下外边距才会有塌陷，左右外边距不会出现这种问题。

#### 外边距塌陷如何解决？ ####

问题：子盒子设置上外边距，父盒子会随着子盒子塌陷，嵌套块元素垂直外边距合并

<style>
            *{
                padding: 0;
                margin: 0;
            }
            .father {
                height: 500px;
                width: 500px;
                background: rgb(184, 184, 167);
            }
            .son {
                width: 200px;
                height: 200px;
                background: rgb(199, 20, 20);
                margin-top: 100px;
            }
    </style>
    <body>
    <div class="father">
    <div class="son">子盒子设置上外边距，父盒子会随着子盒子塌陷，嵌套块元素垂直外边距合并</div>
    </div>
    </body>

如下图所示，是希望出现的效果，然而实际情况是父盒子会随着子盒子一起下来;  
![5fe0493be819942b776b44eec22bacd2.png][]  
**解决方法：**

**方法一**：为父盒子设置1像素的上边框,颜色一样，但是会撑大父盒子，所以父盒子高度减1；

.father {
          border-top: 1px solid rgb(184, 184, 167);
          height: 499px;
     }

**方法二**：为子盒子设置1像素的上内边距，也会撑大子盒子，所以子盒子高度减1；

.son {
         padding-top: 1px;
         height: 199px;
      }

**方法三**：父盒子设置overflow：hidden ，触发bfc ,不会撑大盒子

.father {
          overflow: hidden;
      }

[5fe0493be819942b776b44eec22bacd2.png]: /images/20221119/8f8c39ee36254eff9d16fd4f7863c3b9.png

发表评论取消回复

表情：

评论列表（有 0 条评论，229人围观）

还没有评论，来说两句吧...

相关阅读

相关外边距的折叠

外边距的折叠 <style type="text/css"> .box1, .box2 { width

落日映苍穹つ/ 2023年10月06日 22:09/ 0 赞/ 3 阅读

相关 CSS外边距塌陷问题分析及解决方法

概念：外边距塌陷也称为外边距合并是指两个在正常流中相邻（兄弟或父子关系）的块级元素的外边距组合在一起变成单个外边距不过只有上下外边距才会有塌陷左右外边距不会

野性酷女/ 2023年07月12日 08:54/ 0 赞/ 4 阅读

相关 CSS外边距塌陷问题

外边距塌陷：块级元素的上下外边距有时候会合并，合并后的外边距等于合并前两个外边距中的较大值，这种现象称为外边距塌陷。外边距塌陷有以下三种情况：相邻元素

缺乏、安全感/ 2023年01月06日 05:48/ 0 赞/ 153 阅读

相关外边距塌陷

什么是外边距塌陷？外边距塌陷也称为外边距合并，是指两个在正常流中相邻（兄弟或父子关系）的块级元素的外边距，组合在一起变成单个外边距，不过只有上下外边距才会有塌陷，左右外

Love The Way You Lie/ 2023年01月03日 15:28/ 0 赞/ 230 阅读

相关 CSS 外边距

CSS 外边距 ![在这里插入图片描述][20210325184513919.gif] ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5n

痛定思痛。/ 2022年11月13日 04:29/ 0 赞/ 274 阅读

相关 CSS 外边距合并

CSS 外边距合并 ![在这里插入图片描述][20210325192055399.gif] > 外边距合并指的是，当两个垂直外边距相遇时，它们将形成一个外边距。 >

矫情吗；*/ 2022年10月22日 09:18/ 0 赞/ 185 阅读

相关 html外边距合并,外边距合并

外边距分开(叠加)是一个相称容易的观点。然则，在实践中对网页进行布局时，它会造成许多混同。简单地说，外边距兼并指的是，当两个垂直外边距相遇时，它们将形成一个外边距。兼并后的

「爱情、让人受尽委屈。」/ 2022年10月06日 09:51/ 0 赞/ 205 阅读

相关 CSS外边距叠加

盒模型概念盒模型是css的基石之一，它指定元素如何显示及（在某种程度上）如何相互交互。页面上的每一个元素都被看做一个矩形框，这个框右元素的内容、内边距、

古城微笑少年丶/ 2022年08月07日 06:45/ 0 赞/ 256 阅读

相关【CSS】margin(外边距)

CSS margin(外边距)属性定义元素周围的空间。 margin margin 清除周围的（外边框）元素区域。margin 没有背景颜色，是完全透明的。 marg

不念不忘少年蓝@/ 2022年03月22日 08:26/ 0 赞/ 312 阅读

相关垂直外边距合并

今天在复习html标签时，看到w3c对块级元素有这么一条额外注释 > 默认情况下，HTML 会自动地在块级元素前后添加一个额外的空行，比如段落、标题元素前后。之前确实也知

蔚落/ 2022年03月17日 12:50/ 0 赞/ 257 阅读