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;
      }
相关推荐
金梦人生4 小时前
Css性能优化
前端·css
Holin_浩霖4 小时前
UI设计的底层逻辑:从组件到系统的跃迁
前端
Holin_浩霖4 小时前
前端开发者的 Web3 全图解实战 二
前端
写代码的皮筏艇4 小时前
CSS属性继承与特殊值
前端·css
kevlin_coder4 小时前
🚀 实现同一个滚动区域包含多个虚拟滚动列表
前端·javascript
金梦人生4 小时前
JS 性能优化
前端·javascript
我有一棵树4 小时前
使用Flex布局实现多行多列,每个列宽度相同
前端·css·html·scss·flex
浪裡遊4 小时前
React开发模式解析:JSX语法与生命周期管理
前端·javascript·react.js·前端框架·ecmascript
用户877244753964 小时前
Lubanno7UniverSheet:开放底层能力,让你的表格需求 “不设限”
前端
张可爱4 小时前
ES6奶茶铺版通俗笔记 🍵✨
前端