【CSS】外边距折叠(margin 塌陷)

外边距折叠(collapsing margins)

毗邻的两个或多个margin会合并成一个margin,叫做外边距折叠。

规则如下:

  • 两个或多个毗邻的普通流中的块元素垂直方向上的 margin会折叠
  • 浮动元素 / inline-block元素 / 绝对定位元素 / 行内元素的margin不会和垂直方向上的其他元素的margin折叠
  • 创建了块级格式化上下文(BFC)的元素,不会和它的子元素发生margin折叠

我们可以利用外边距塌陷进行很多操作:

  • 居中
css 复制代码
    .divA {
        height: 80px;
        width: 200px;
        background: #6ddb14;
        margin-bottom: 40px;
    }

    .divB {
        height: 40px;
        width: 200px;
        background: #0f80a2;
        margin-top: -100px
    }
相关推荐
sen_shan1 小时前
Vue3+Vite+TypeScript+Element Plus开发-04.静态菜单设计
前端·javascript·typescript·vue3·element·element plus·vue 动态菜单
旧识君2 小时前
移动端1px终极解决方案:Sass混合宏工程化实践
开发语言·前端·javascript·前端框架·less·sass·scss
吃没吃2 小时前
vue2.6-源码学习-Vue 核心入口文件分析
前端
Carlos_sam2 小时前
Openlayers:海量图形渲染之图片渲染
前端·javascript
XH2762 小时前
Android Retrofit用法详解
前端
鸭梨大大大2 小时前
Spring Web MVC入门
前端·spring·mvc
吃没吃2 小时前
vue2.6-源码学习-Vue 初始化流程分析 (src/core/instance/init.js)
前端
XH2762 小时前
Android Room用法详解
前端
木木黄木木3 小时前
css炫酷的3D水波纹文字效果实现详解
前端·css·3d
郁大锤3 小时前
Flask与 FastAPI 对比:哪个更适合你的 Web 开发?
前端·flask·fastapi