css外边距重叠是规范定义的正常行为，发生在同一bfc中垂直相邻的普通流块级元素间，典型场景包括：相邻兄弟元素、父子元素（父无border/padding时）、空块级元素自身上下外边距；取最大值旨在避免间距累加导致的视觉异常，符合语义直觉。
因为这是 CSS 规范明确定义的“外边距重叠（margin collapsing）”行为，不是 bug，也不是浏览器差异，所有符合标准的渲染引擎都这么干。
哪些情况会触发 margin 重叠？
只发生在块级格式化上下文（BFC）中、垂直方向相邻的普通流内块级元素之间。典型场景包括：
- 两个
<div> 元素上下紧挨着，各自设了 <code>margin-bottom和margin-top - 父元素没设
border/padding/overflow，子元素的margin-top与父元素“塌陷”到一起 - 空的块级元素，其上下
margin会“穿透”自身，和前后元素合并
为什么取最大值而不是相加？
设计初衷是避免嵌套结构或列表项之间出现意外的“双倍空白”。比如：
.item { margin: 1em 0; }
如果每个 .item 都按相加计算，相邻两项之间就会是 2em，但开发者本意通常只是“每项上下留 1em 空隙”，取最大值更符合语义直觉。
计算规则简单说就是：
- 全为正数 → 取
max() - 含负值 → 用最大正值减去最大负值绝对值（如
margin-top: 20px+margin-bottom: -10px→ 实际间距为10px） - 全为负 → 结果为
0减去最大绝对值（即负得最多那个）
flex / grid 布局里为什么没这问题？
因为它们创建的是独立的格式化上下文（FFC / GFC），不参与 BFC 中的 margin 重叠逻辑：
-
display: flex容器里的子元素是 flex item，它们的margin是真实累加的（margin-bottom: 20px+margin-top: 20px=40px间距） - 但要注意：这不是“修复”，而是根本不在同一套规则里 —— FFC 没有“相邻块级兄弟”的概念
- 所以别指望
gap能替代所有margin场景；它只控制 item 之间，不控制 item 与容器边缘的距离
怎么临时绕过重叠？
关键不是“阻止”，而是“打破 BFC 同一性”或“插入隔离层”：
- 给父容器设
overflow: hidden（或auto、scroll）→ 新建 BFC，子元素 margin 不再和父级塌陷 - 给其中一个元素加
border-top: 1px solid transparent→ 物理隔开两个 margin，重叠失效 - 用
float或position: absolute→ 元素脱离普通流，不再参与重叠 - 改用
padding替代部分margin→ padding 不重叠，且能稳定撑开空间
真正容易被忽略的是：重叠只在渲染前的布局计算阶段发生，DOM 结构和 computed style 看不出“哪个 margin 被吃了”，只能靠实际像素距离反推。调试时直接量元素间距，比查 devtools 里的 margin 值更可靠。
