Flex容器中子元素的margin不会合并，因flex布局绕过常规文档流，每个子元素的margin独立计算且相加而非取最大值。
flex 容器里的子元素 margin 会合并吗
不会。Flex 布局中，margin 合并（margin collapsing）规则完全失效——这是 CSS 规范明确规定的。只要父容器设置了 display: flex 或 display: inline-flex，其直接子元素（flex items）之间的上下外边距就**不会合并**，无论它们是块级还是行内级。
常见误解是把“视觉上看起来挨得很近”当成“margin 合并了”，其实那只是 flex 默认的 align-items: stretch 和主轴排列方式导致的错觉。真正的 margin 合并只发生在常规文档流中的块级盒（block formatting context）之间，而 flex item 不参与该流程。
为什么 flex 中 margin 不合并：关键机制在哪
根本原因是 flex 布局绕过了常规文档流的布局阶段。每个 flex item 是独立参与 flex 分配的“弹性盒子”，它们的 margin 被视为 item 自身的边界，用于计算在 flex 容器内的定位与间距，而非用于触发 BFC 中的合并逻辑。
-
margin-top和margin-bottom在 column 方向下仍起作用，但彼此不抵消 - 相邻 flex item 的
margin-bottom和下一个 item 的margin-top会**相加**，而不是取最大值 - 即使 item 内部有块级子元素，那些子元素间的 margin 合并照常发生（因为它们仍在常规流中）
实际开发中容易误判的几个场景
你以为是 margin 合并，其实只是 flex 排列特性在“背锅”：
立即学习“前端免费学习笔记（深入）”；
- 两个
div在 row 方向排列时紧贴在一起 → 实际是默认flex-wrap: nowrap+ 没留空隙，和 margin 无关 - 设置了
margin: 10px却发现垂直方向没间距 → 很可能容器是flex-direction: row，此时margin-top/bottom是生效的，但被父容器高度或align-items截断了视觉表现 - 用
gap替代 margin 后布局突变 →gap专用于 flex/grid 间隙，不与 margin 叠加，也不触发任何合并，但会覆盖 item 间“自然”的 margin 行为
想控制 flex item 间距，优先用什么
别依赖 margin 拼凑间隙，尤其当需要统一、响应式或跨浏览器一致时：
- 主轴（row/column）间隙：用
gap（支持所有现代浏览器，IE 不支持） - 单侧 push：对第一个/最后一个 item 单独设
margin，比如:first-child { margin-left: 0; } - 需要兼容老版本 Safari（gap 失效时，改用伪元素或 wrapper 包裹来模拟
- 避免混用
gap和 item 的margin—— 它们共存时会叠加，容易超出预期尺寸
真正要警惕的不是 margin 合并是否发生，而是误以为它发生了，从而在 flex 布局里写一堆无用的 margin: 0 或 hack 式重置。理解 flex item 的 margin 是“独立且相加”的，比记住“不合并”本身更重要。
