仅当两个块级元素相邻并且在同一个块级格式化上下文时，它们垂直方向margin会折叠

最新推荐文章于 2025-06-23 15:23:59 发布
原创 最新推荐文章于 2025-06-23 15:23:59 发布 · 945 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

博客指出仅当两个块级元素相邻且处于同一个块级格式化上下文时，它们垂直方向的margin会折叠，这是关于前端开发中元素布局的重要知识。
      
块格式化上下文 & 堆叠上下文
Miss Z的博客
09-04 331
堆叠上下文是HTML元素的三维概念，这些HTML元素在一条假想的相对于面向（电脑屏幕的）视窗或者网页的用户的z轴上延伸，HTML元素依据其自身属性按照优先级顺序占用堆叠上下文的空间。
前端CSS理解 —— BFC(块级格式化上下文)
upgrade_bro的博客
08-04 316
BFC即 Block Formatting Contexts (块级格式化上下文)，BFC是指浏览器中创建了一个独立的渲染区域（内部元素的渲染不会影响边界以外的元素）。应用BFC可以避免margin折叠、清除浮动……
块状元素垂直外边距重叠
json博客
12-03 1069
一、垂直外边距重叠属于同一个BFC的两个相邻盒子，垂直margin会发生重叠 二、重叠外边距计算1、如果都是正边界，边界宽度是相邻边界宽度中最大的值2、如果出现负边界，则在最大的正边界中减去绝对值最大的负边界（正-|负|）3、如果没有正边界，则从零中减去绝对值最大的负边界   三、示例 1、如果都是正边界，边界宽度是相邻边界宽度中最大的值 div1{height:200px;widt...
外边距重叠
chen__cheng的博客
04-17 726
外边距重叠1.什么是外边距塌陷问题2.外边距重叠（外边距塌陷）3.外边距重叠出现条件4.外边距计算5.出现场景1.相邻关系2.父子关系6.解决外边距重叠 1.什么是外边距塌陷问题 查看以下场景： <div></div> <div></div> <style> div:nth-child(1) { width: 100px; height: 100px; background-color: #909090; marg
css中的外边距合并时垂直方向上的普通流相邻元素间
kbx8916的博客
07-20 952
作者：丁小倪 链接：https://www.zhihu.com/question/19823139/answer/13610574 来源：知乎 著作权归作者所有，转载请联系作者获得授权。 为了不误导大家，如果克军指的是触发上下元素的BFC，必须指出克军的答案是错误的，这样的margin还是会折叠的。 collapsing-margin的W3C官方介绍：http://www.w
解决外边距重叠-css
feng_strong的博客
11-14 476
折叠结果计算规则： 1、两个相邻的外边距都是正数时，折叠结果是它们两者之间较大的值； 2、两个相邻的外边距都是负数时，折叠结果是两者绝对值的较大值； 3、两个外边距一正一负时，折叠结果是两者的相加的和怎么避免外边距折叠 怎么避免外边距折叠： 浮动元素、inline-block 元素、绝对定位元素的 margin 不会和垂直方向上其他元素的 margin 折叠（注意这里指的是上下相邻的...
【高频考点精讲】深入理解 BFC（块级格式化上下文）及其在布局中的作用
全栈老李的博客
06-23 931
简单来说，BFC 是 CSS 渲染时的一块独立区域，它决定了元素如何布局，以及和其他元素的关系。你可以把它想象成一个“结界”，里面的元素不会影响到外面的元素，外面的元素也不会影响到里面。BFC 的触发条件有很多，比如：float不为noneposition为absolute或fixeddisplay为table-cellflexgrid等overflow不为visible（比如hiddenautoscroll。
深入理解块级格式化上下文(BFC)
白日梦先生的博客
03-30 4439
一、 什么是BFC 块级格式化上下文，Block Formatting Context，也就是常说的BFC，它是Web页面的可视化CSS渲染区域的一部分，是布局过程中生成块级盒子的区域，也是浮动元素与其他元素的交互限定区域。 BFC的布局规则如下： 内部的盒子会在垂直方向，一个一个地放置 BFC是页面上的一个隔离的独立容器 属于同一个BFC的两个相邻Box的上下margin会发生重叠 计算...
挑战一轮大厂后的面试总结 (含六个方向) – css 篇
01-20
外边距折叠是指在垂直方向上，相邻的两个或多个盒模型元素的外边距可以合并为一个更大的外边距。要防止外边距折叠，可以： - 使用浮动（float）、绝对定位（position: absolute/fixed） - 设置内边距（padding）...
解决外边距重叠
weixin_39307273的博客
02-04 1306
一、外边距重叠 边界重叠是指两个或多个盒子(可能相邻也可能嵌套)的相邻边界(其间没有任何非空内容、补白、边框)重合在一起而形成一个单一边界。 换句话说，外边距重叠是指两个垂直相邻的块级元素，当上下两个边距相遇时，起外边距会产生重叠现象，且重叠后的外边距，等于其中较大者。 margin值重叠计算的方法： margin值都为正，取两者的最大的值。 出现负边界，用最大的正边界减去绝对值最大...
css 俩个垂直的块级元素外边距塌陷问题
rgpbrave的博客
09-21 474
在“标准文档流中” 通过 margin 定义块元素的垂直外边距时，可能会出现外边距的合并现象；合并的情况有两种：一种是相邻块元素垂直外边距的合并，另一种是嵌套块元素垂直外边距的合并 相邻块元素的垂直外边距的合并现象 当上下相邻的两个块元素都设置外边距（margin），如果上面的元素有下外边距 margin-bottom，下面的元素有上外边距 margin-top，则他们之间的垂直间距不是 margin-bottom + margin-top 实际会取两个值中的较大者作为外边距，这种现象被称为相邻块元素垂直外
CSS 外边距(margin)重叠及防止方法
前端岚枫
12-08 3814
边界重叠是指两个或多个盒子(可能相邻也可能嵌套)的相邻边界(其间没有任何非空内容、补白、边框)重合在一起而形成一个单一边界。 两个或多个块级盒子的垂直相邻边界会重合。结果的边界宽度是相邻边界宽度中最大的值。如果出现负边界，则在最大的正边界中减去绝对值最大的负边界。如果没有正边界，则从零中减去绝对值最大的负边界。注意：相邻的盒子可能并非是由父子关系或同胞关系的元素生成。 但是边界的重叠也有例
html两个块元素的垂直间距,相邻块元素垂直合并是怎样实现的？
weixin_34792641的博客
06-22 1206
当上下相邻的两个块元素相遇时，如果上面的标签有下外边距margin-bottom，下面的标签有上外边距margin-top，则它们之间的垂直间距不是margin-bottom与margin-top之和，而是两者中的较大者。这种现象被称为相邻块元素垂直外边距的合并(也称外边距塌陷)。示例代码如下：.one{width:150px;height:150px;background:#FC0;margin...
父子或兄弟div元素边距重叠
A13330069275的博客
12-14 2872
所有毗邻的两个或者多个盒元素的margin会合并为一并共享之。毗邻的意思是同级或嵌套的盒元素
CSS3 -webkit-transition(属性渐变)
热门推荐
tuhuolong的专栏
10-16 3万+
transition(属性渐变):"CSS Transitions allow property changes in CSS values to occur smoothly over a specified duration" -webkit-transition：CSS属性(none|all|属性)  持续时间  时间函数  延迟时间 CSS属性(transition-pro
【Web】<script type="text/template"></script>适合用于定义模板(模板容器),不解析(渲染/执行)
tuhuolong的专栏
01-19 8769
JS(本身是)单线程和UI线程同步(互斥)
tuhuolong的专栏
05-31 3219
（1）UI线程 （2）JS线程 （3）事件(触发)线程
服务端删除cookie: 响应头设置过期的时间+无效的cookie值
tuhuolong的专栏
01-30 2848
如何解决相邻元素的外边距折叠（margin collapse）问题？
最新发布
08-09
所以，如果我们想要完全阻止两个相邻元素的外边距折叠，最好的方法是将其中一个元素放入BFC容器中，这样这个元素的外边距就被限制在BFC容器内，不会和外部元素折叠。 因此，更可靠的方法是：将其中一个元素包裹在...
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值