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。

相关推荐
骑自行车的码农6 小时前
React 合成事件的设计原理 2
前端·react.js
JamesGosling6666 小时前
详解 Vue 3.6 Vapor Mode:从原理到问题,看透 VDOM 逐步退场的底层逻辑
前端·vue.js
一个很帅的帅哥6 小时前
Vue中的hash模式和history模式
前端·vue.js·history模式·hash模式
进阶的鱼6 小时前
React+ts+vite脚手架搭建(三)【状态管理篇】
前端·javascript·react.js
By北阳7 小时前
Less resolver error:‘~antd/es/style/themes/index.less‘ wasn‘t found.
前端·elasticsearch·less
西洼工作室7 小时前
SSE与轮询技术实时对比演示
前端·javascript·css
IT_陈寒8 小时前
Vite 5.0 性能优化实战:3 个关键配置让你的构建速度提升50%
前端·人工智能·后端
excel8 小时前
Vue2 动态添加属性导致页面不更新的原因与解决方案
前端
GISer_Jing11 小时前
明天好好总结汇总分析博客
前端·javascript·面试
做运维的阿瑞14 小时前
Windows 环境下安装 Node.js 和 Vue.js 框架完全指南
前端·javascript·vue.js·windows·node.js