相邻垂直外边距的塌陷

凶鸡

已于 2022-02-12 22:04:26 修改

阅读量292

点赞数 1

分类专栏： CSS杂记文章标签： css html html5 css3 前端

于 2021-06-14 15:09:21 首次发布

本文链接：https://blog.csdn.net/angry_rooster/article/details/117904553

版权

CSS杂记专栏收录该内容

3 篇文章 1 订阅

订阅专栏

本文详细介绍了CSS中垂直外边距塌陷的现象，包括相邻元素和父子元素间的塌陷情况，以及塌陷时垂直外边距的取值规则。为避免布局混乱，提出了使用内边距、创建BFC、绝对定位等解决方案，并强调规范使用内外边距以防止塌陷。同时，提供了多种替代实现间隔的方法，以确保布局的稳定。

摘要由CSDN通过智能技术生成

首先需要明确塌陷只会发生在块级元素的相邻垂直外边距间

在使用CSS的垂直外边距样式时，相邻元素和父子元素都有可能发生相邻垂直外边距的塌陷（相邻元素是上方元素的下外边距和下方元素的上外边距之间，父子元素是父元素的上外边距和子元素的上外边距之间），为了在编写静态页面时避免由于垂直外边距的塌陷导致的布局混乱，需要了解塌陷时垂直外边距的表现和产生的原因——知道原因才能更好的解决问题

塌陷时外边距的计算方式

在《CSS权威指南》一书中对这种塌陷发生的描述非常的生动，书中将包围元素的外边距比作透明的塑料片，当上下相邻的元素的外边距相邻时，塑料片的垂直宽度大的先触碰到塑料片垂直宽度小的元素的边界，所以塌陷时，保留的是垂直宽度大的外边距值；当父子元素的外边距相邻时，是塑料片垂直宽度大的先触到其他元素或页面的边界，所以塌陷发生时也是保留垂直宽度大的外边距值

在这里插入图片描述

以下明确塌陷发生时相邻垂直外边距的取值方式：

相邻的垂直外边距都为正值，取值较大的
相邻的垂直外边距都为负值，取绝对值较大的
相邻的垂直外边距一正一负，取这两个数的和

父子元素的垂直外边距塌陷

父子元素之间的外边距塌陷发生在父元素的上外边距和子元素的上外边距之间，取值方式如上所述

在这里插入图片描述

主要代码如下：

<!-- 以上三组父子元素的HTML结构 -->
<!-- 第一组 -->
<div class="parent" style="margin-top: 100px;">
    <div class="son" style="margin-top: 50px;"></div>
</div>

<!-- 第二组 -->
<div class="parent" style="margin-top: 100px;">
    <div class="son" style="margin-top: -50px;"></div>
</div>

<!-- 第三组 -->
<div class="parent" style="margin-top: -100px;">
    <div class="son" style="margin-top: -50px;"></div>
</div>

相邻元素的垂直外边距塌陷

相邻元素之间的外边距塌陷发生在上方元素的下外边距和下方元素的上外边距之间

在这里插入图片描述

主要代码如下：

<!-- 以上三组相邻元素的HTML结构 -->
<!-- 第一组 -->
<div class="sibling1" style="margin-bottom: 100px;"></div>
<div class="sibling2" style="margin-top: 50px;"></div>

<!-- 第二组 -->
<div class="sibling1" style="margin-bottom: 50px;"></div>
<div class="sibling2" style="margin-top: -100px;"></div>

<!-- 第三组 -->
<div class="sibling1" style="margin-bottom: -50px;"></div>
<div class="sibling2" style="margin-top: -100px;"></div>

防止垂直外边距塌陷的方法

要说明一下的是，垂直外边距的塌陷是发生在相邻的垂直外边距之间的，只要不对紧邻在一起的块级元素使用相邻的垂直外边距，是不会有这种塌陷问题的。所以在进行静态布局时，规范的做法往往是：相邻元素的（上下相邻或左右相邻）间隔用外边距实现，并且垂直外边距统一使用一侧的外边距（上外边距或下外边距），而父子元素的（上下间距或左右间距）间隔用内边距实现

在这里插入图片描述

主要代码如下：

<!-- HTML结构如下 -->
<div class="con">
    <div class="parent">
        <div class="son"></div>
    </div>
    <div class="parent">
        <div class="son"></div>
    </div>
    <div class="parent">
        <div class="son"></div>
    </div>
</div>

.parent {
    /* 统一使用 上外边距 实现 相邻元素间 的间隔 来 避免塌陷问题 */
    margin-top: 50px;
    /* 使用 内边距 来 实现 父子元素 的间隔 */
    padding-top: 20px;
}

防止父子元素的垂直外边距塌陷

当父子元素的垂直外边距塌陷发生时，主要有三种方式解决这个问题：

避免父子元素紧贴彼此：使用边框或内边距将父子元素隔开
触发BFC：典型的，可以对父元素使用overflow: hidden触发
使子元素脱离标准流（提高子元素的层叠上下文）：对子元素使用绝对定位或进行浮动

但以上做法有各自的局限性（见下图解析）

在这里插入图片描述

主要代码如下:

使用边框或内边距：
边框的存在可能会引起布局的些许偏差（尺寸上多出了边框的尺寸），有时并不希望有边框的存在；如果对父元素使用内边距，那么子元素距离父元素顶部的间距等于上内边距+上外边距，这样可能导致需要调整内外边距的值，这样比较麻烦

<!-- 添加边框或内边距 -->
<div class="parent" style="border: 1px solid black;">
    <!-- <div class="parent" style="padding: 1px;"> -->
    <div class="son"></div>
</div>

使用overflow: hidden：
当父元素的内部元素在布局时如果有超出父元素的部分，这部分将无法显示

<!-- 触发BFC -->
<div class="parent" style="overflow: hidden;">
    <div class="son"></div>
</div>

使子元素脱离标准流：
这个算是比较清爽的做法，既不改变元素原有的尺寸，也不会隐藏超出父元素的部分，但由于子元素脱离了标准流，原有的一些样式可能对子元素无效（就像这里子元素无法居中，因为“margin: 0 auto”对它无效）

 <!-- 使子元素脱离标准流：绝对定位或浮动 -->
<div class="parent" style="position: relative;">
    <div class="son" style="position: absolute"></div>
    <!-- <div class="son" style="float: left;"></div> -->
</div>