CSS之margin塌陷

margin塌陷

CSS中的外边距塌陷(Margin Collapse)问题是指在垂直方向上,当两个或多个块级元素的边距相遇时,它们之间的距离不是它们各自边距的总和,而是其中的最大值。这种现象主要出现在块级元素的上下外边距之间。

javascript 复制代码
  <div class="box ac">Box 1</div>
  <div class="box bc">Box 2</div>
css 复制代码
    .box {
      width: 100px;
      height: 100px;
      color: white;
    }

    .ac {
      background: red;
      margin-bottom: 20px;
    }

    .bc {
      background: blue;
      margin-top: 30px;
    }

.ac和.bc有上下margin但是只生效了一个最大值。

产生原因

外边距塌陷只发生在垂直方向的块级元素上,原因如下:
  • 相邻兄弟元素:垂直排列的两个兄弟元素之间的边距会发生塌陷。
  • 父子元素边距:当一个块级元素为空(或高度为0),并且它的上(和/或)下边距有值时,如果它与子元素之间没有边框、内边距、内联内容、或创建了BFC(块格式化上下文)的元素分隔,那么它的边距会和子元素的边距发生塌陷。
  • 空块级元素的边距:如果一个块级元素不包含任何内容,并且它的上下边距都有值,这两个边距可能会发生塌陷。

解决方案

  • 使用边框(border)或内边距(padding):通过设置border或者padding来解决。
css 复制代码
.ac {
      background: red;
      margin-bottom: 20px;
      border-bottom: 20px solid white;
}
  • 创建块格式化上下文(BFC):在元素上创建一个新的BFC可以阻止它与外部元素的外边距塌陷,常见的创建BFC的方法包括设置元素的overflow属性为hidden、auto, 或者 scroll。

HTML:

javascript 复制代码
    <div class="container">
      <div class="box ac">Box 1</div>
    </div>
    <div class="box bc">Box 2</div>

CSS:

css 复制代码
      .box {
        width: 100px;
        height: 100px;
        color: white;
      }

      .ac {
        background: red;
        margin-bottom: 20px;
      }

      .bc {
        background: blue;
        margin-top: 30px;
      }

      .container {
        overflow: hidden;
      }
  • 使用伪元素:在父元素中添加伪元素,并为伪元素设置display: table;,这样可以阻止与子元素之间的外边距塌陷。
css 复制代码
      .container {
        display: table;
      }
  • 设置display: flex或display: grid:为父元素设置Flex或Grid布局会创建一个新的布局上下文,也可避免边距塌陷。
css 复制代码
      .container {
        display: flex;
      }
相关推荐
2301_7683502315 小时前
Vue第二期:组件及组件化和组件的生命周期
前端·javascript·vue.js
华洛16 小时前
公开一个AI产品的商业逻辑与设计方案——AI带来的涂色卡自由
前端·后端·产品
明远湖之鱼16 小时前
opentype.js 使用与文字渲染
前端·svg·字体
90后的晨仔17 小时前
Vue 3 组合式函数(Composables)全面解析:从原理到实战
前端·vue.js
今天头发还在吗17 小时前
【React】动态SVG连接线实现:图片与按钮的可视化映射
前端·javascript·react.js·typescript·前端框架
小刘不知道叫啥17 小时前
React 源码揭秘 | suspense 和 unwind流程
前端·javascript·react.js
szial17 小时前
为什么 React 推荐 “不可变更新”:深入理解 React 的核心设计理念
前端·react.js·前端框架
mapbar_front17 小时前
面试是一门学问
前端·面试
90后的晨仔17 小时前
Vue 3 中 Provide / Inject 在异步时不起作用原因分析(二)?
前端·vue.js
90后的晨仔17 小时前
Vue 3 中 Provide / Inject 在异步时不起作用原因分析(一)?
前端·vue.js