【自学CSS笔记第11篇】——外边距塌陷问题及解决方式

南斋孤鹤

已于 2022-11-13 11:16:04 修改

阅读量555

点赞数

分类专栏： CSS笔记文章标签： css 前端 javascript

于 2022-10-30 17:30:16 首次发布

本文链接：https://blog.csdn.net/m0_64231944/article/details/127600127

版权

CSS笔记专栏收录该内容

14 篇文章 0 订阅

订阅专栏

前言：

很多前端的初学者，比如我，在使用margin的之后或许会遇到一些问题，比如我设置的margin-top为何不起作用呢?这些问题很有可能就是margin外边距塌陷的问题。下面主要讲什么是margin外边距塌陷问题，以及如何解决；

什么是外边距塌陷（外边距合并）？

外边距合并指的是，当两个垂直外边距相遇时，它们将形成一个外边距。

什么是垂直外边距？就是margin-top和margin-bottom；

合并后的外边距实际起作用的值等于两个发生合并的外边距的高度中的较大者。

简单来说，外边距合并指的是，当两个垂直外边距相遇时，它们将形成一个外边距。合并后的外边距的高度等于两个发生合并的外边距的高度中的较大者。

当一个元素出现在另一个元素上面时（也就是兄弟级标签），第一个元素的下外边距与第二个元素的上外边距会发生合并。
当一个元素包含在另一个元素中时（也就是父子级标签）（假设没有内边距或边框把外边距分隔开），它们的margin-top和margin-bottom也会发生合并。

外边距甚至可以与自身发生合并。

假设有一个空元素，它有外边距，但是没有边框或填充。在这种情况下，上外边距与下外边距就碰到了一起，它们会发生合并：如果这个外边距遇到另一个元素的外边距，它还会发生合并：这就是一系列的段落元素占用空间非常小的原因，因为它们的所有外边距都合并到一起，形成了一个小的外边距。

外边距合并的设计初衷：

外边距合并初看上去可能有点奇怪，但是实际上，它是有意义的（对于这个问题也有很多人说这是一个bug）。我们以由几个段落组成的典型文本页面为例。第一个段落上面的空间等于段落的上外边距。如果没有外边距合并，后续所有段落之间的外边距都将是相邻上外边距和下外边距的和。这意味着段落之间的空间是页面顶部的两倍。如果发生外边距合并，段落之间的上外边距和下外边距就合并在一起，这样各处的距离就一致了。

综上可得：外边距的初衷就是为了解决段落之间的空隙问题，所以他也只可能出现在垂直方向；

注意：只有普通文档流中块框的垂直外边距才会发生外边距合并。行内框、浮动框或绝对定位之间的外边距不会合并。

出现外边距塌陷问题的两种情况：

一：兄弟级标签：

当上下相邻的两个元素相遇时，如果上面的元素有下边距margin-bottom；
下面的元素有上外边距margin-top，则他们之间的垂直间距不是margin-bottom和margin-top之和；
取两个值中的较大值这种现象被称为相邻块元素垂直外边距的合并（也称外边距塌陷）；

    /*<div class="box1"></div>
    <div class="box2"></div>*/
.box1{
    width: 300px;
    height: 300px;
    background-color: aqua;

    margin-bottom: 40px;
    border:dashed;
}    
.box2{
    margin-top: 100px;
    width: 300px;
    height: 300px;
    background-color: blueviolet;    
}

解决方案：

尽量只为其中一个加外边距；

二：父子级标签：

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

/*<div class="father">
        <div class="son"></div>
    </div>*/
.father{
    width: 800px;
    height: 400px;
    background-color: rgb(23, 46, 46);

    margin-bottom: 40px;
    border: dashed;
}
.son{
    margin-top:40px ;
    width: 300px;
    height: 300px;
    background-color: rgb(43, 226, 76);
}