CSS 边距合并(折叠)

顶边距和底边距有时候会被合并成一个边距,这个就叫做边距合并(折叠)。即使边距没有设置或者设置的是0也是有可能会发生这个现象的。

边距合并(折叠)的适用范围

  • displayblock的,这是因为inline元素的顶边距和底边距虽然会生效,但是并不会有阻止重叠的效果,因此也没有必要进行边距合并的操作了,各自按各自的边距去显示即可。

  • 只针对垂直方向的边距 因此如下代码只设置了左右边距

    css 复制代码
    <div style="display: inline-block; margin-right: 20px;">p1</div><div style="display: inline-block; margin-left: 20px;">p2</div>

    会有下图所示的效果(注意此图是示意图,并非完全是上述代码所显示的效果):

    可以看到水平方向的边距并没有合并,而是使用各自的边距之和,导致两个元素中间的距离有40px。

    拓展:

    1.如果上述代码改成如下:

    css 复制代码
    <div style="display: inline-block;">p1</div>
    <div style="display: inline-block;">p2</div>

    那么两个元素之间即使没有设置水平边距,也会有一个默认的距离,大概是

    inline-blcok块之间的不可见符号会被保留父层字体的1/3大小的空间

    这里所说的不可见字符,在上述代码这个例子中,其实是指的html文件中两个div之间的回车符号。 (参考 前端 - 【整理】几种解决inline-block间隙的方案 - willspace - SegmentFault 思否

    2.与其说是边距合并只发生在垂直方向上,不如说是发生在block元素的分布方向上,我们可以通过修改writing-mode这个属性来将垂直这个默认的分布方向改成水平,那么这个时候边距合并就会发生在水平方向上了。

  • 浮动元素或者绝对定位的元素的边距是不会合并的。

  • flex或者grid元素的子元素的边距也是不会合并的。

  • 相邻的同级元素可能会发生边距合并现象(除非后面的元素需要清除之前的浮动?)

  • 没有内容间隔的父子元素之间会发生边距合并现象

  • 一个元素的顶边距和底边距之间没有任何内容,此时会发生边距合并现象

边距合并(折叠)的计算规则

  • 两个相邻的同级元素,分别设置了底边距和顶边距,并且都是大于等于0的值

    html代码:

    html 复制代码
    <div style="display: block; height: 40px; width: 60px; margin-bottom: 20px;">
    Top
    </div>
    <div style="display: block; height: 40px; width: 60px; margin-top: 40px;">
    Bottom
    </div>

    示意图:

    计算规则:

    取边距大的,故这里的距离是40px。

  • 两个相邻的同级元素,分别设置了底边距和顶边距,并且值分别是一负一正(正数或者0均可)

    html:

    html 复制代码
    <div style="display: block; height: 40px; width: 60px; margin-bottom: -20px; border: 5px solid red;">
    Top
    </div>
    <div style="display: block; height: 40px; width: 60px; margin-top: 40px; border: 5px solid blue">
    Bottom
    </div>

    示意图:

    计算规则:

    正负相加,故最终距离为20px。引申:当边距中包含负数时,最终的距离等于最大的正数加上最小的负数的和。

  • 两个相邻的同级元素,分别设置了底边距和顶边距,并且值都是负数

    html:

    html 复制代码
     <div style="display: block; height: 40px; width: 60px; margin-bottom: -10px;">
     Top
     </div>
     <div style="display: block; height: 40px; width: 60px; margin-top: -20px;">
     Bottom
     </div>

    示意图:

    计算规则:

    取最小的边距,故最终的距离是-20px,可以看到下方的元素已经和上方的元素重叠一半了。

  • 父子(嵌套)元素,且父子元素之间无任何内容间隔,如border,padding,floating元素等。

    html:

    css 复制代码
    <div style="display: block; height: 40px; width: 60px; border: 1px solid red;">
    </div>
    <div style="display: block; height: 40px; width: 60px; margin-top: 20px">
      <div style="display: block; height: 40px;margin-top: 40px">
      </div>
    </div>

    示意图:

    计算规则:

    在父子元素的顶边距中取大的边距,类似上述规则,故最终的顶边距是40px。

相关推荐
清羽_ls33 分钟前
React Hooks 核心规则&自定义 Hooks
前端·react.js·hooks
你的人类朋友39 分钟前
“签名”这个概念是非对称加密独有的吗?
前端·后端·安全
西陵1 小时前
Nx带来极致的前端开发体验——任务缓存
前端·javascript·架构
10年前端老司机2 小时前
Promise 常见面试题(持续更新中)
前端·javascript
潘小安2 小时前
跟着 AI 学 (一)- shell 脚本
前端·ci/cd·vibecoding
clownAdam3 小时前
Chrome性能优化秘籍
前端·chrome·性能优化
@Kerry~3 小时前
phpstudy .htaccess 文件内容
java·开发语言·前端
WebDesign_Mu5 小时前
为了庆祝2025英雄联盟全球总决赛开启,我用HTML+CSS+JS制作了LOL官方网站
javascript·css·html
@PHARAOH5 小时前
WHAT - 前端性能指标(交互和响应性能指标)
前端·交互
噢,我明白了5 小时前
前端js 常见算法面试题目详解
前端·javascript·算法