【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
    }
相关推荐
会飞的鱼先生8 分钟前
Vue3的内置组件 -实现过渡动画 TransitionGroup
前端·javascript·vue.js·vue
晓得迷路了8 分钟前
10 分钟开发一个 Chrome 插件?Trae 让你轻松实现!
前端·javascript·trae
秋天的一阵风13 分钟前
Vue3探秘系列— 路由:vue-router的实现原理(十六-上)
前端·vue.js·面试
秋天的一阵风14 分钟前
Vue3探秘系列— 路由:vue-router的实现原理(十六-下)
前端·vue.js·面试
工呈士32 分钟前
CSS布局实战:Flexbox 与 Grid 精髓解析
css·面试·flexbox
海底火旺34 分钟前
JavaScript中的Object方法完全指南:从基础到高级应用
前端·javascript·面试
海底火旺35 分钟前
JavaScript中的Symbol:解锁对象属性的新维度
前端·javascript·面试
天天扭码35 分钟前
一文吃透 ES6新特性——解构语法
前端·javascript·面试
Kagerou36 分钟前
组件测试
前端
JustHappy38 分钟前
啥是Hooks?为啥要用Hooks?Hooks该怎么用?像是Vue中的什么?React Hooks的使用姿势(上)
前端·vue.js·react.js