外边距塌陷

Love The Way You Lie 2023-01-03 15:28 251阅读 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 条评论，251人围观）

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

相关阅读

相关 css中BFC外边距塌陷解决办法

什么是BFC 块级格式化上下文，独立的渲染区域，与外部毫不相干，上下两个元素都设置了外边距，结果会出现重叠的部分合并 <!DOCTYPE html> <

悠悠/ 2023年10月16日 00:27/ 0 赞/ 38 阅读

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

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

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

相关嵌套块元素垂直外边距的合并（塌陷）

对于两个嵌套关系的块元素，如果父元素没有上内边距及边框父元素的上外边距会与子元素的上外边距发生合并合并后的外边距为两者中的较大者 ![在这里插

- 日理万妓/ 2023年02月16日 14:30/ 0 赞/ 22 阅读

相关外边距折叠

原文链接: [外边距折叠][Link 1] 外边距折叠问题外边距折叠的概念在CSS中，两个或多个毗邻的普通流中的盒子（可能是父子元素，也可能是兄弟元素），在垂

野性酷女/ 2023年02月13日 03:55/ 0 赞/ 4 阅读

相关 CSS外边距塌陷问题

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

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

相关外边距塌陷

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

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

相关 CSS 外边距

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

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

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

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

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

相关【CSS】margin(外边距)

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

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

相关垂直外边距合并

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

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