gap只对flex容器的直接子元素（即独立flex项目）生效；若图标和文字同属一个子元素（如同一span内），gap无效，须拆分为多个子元素并配合align-items: center实现对齐。
flex 容器里图标和文字之间空隙不一致，gap 不生效？
直接说结论：gap 只对 flex 项目（flex items） 有效，而如果你把图标和文字写在同一个元素里（比如 <span><i class="icon"></i>文字</span>），它们根本就不是独立的 flex 项目，gap 压根不会起作用。
常见错误现象：
- 设置了
display: flex和gap: 8px，但图标和文字紧贴着，没间距 - 用
margin临时加空隙，结果在不同浏览器或缩放下错位 - 图标用
font-size放大后，文字基线对不齐，看起来像“悬浮”或“下沉”
让 gap 真正起作用：必须拆成独立的 flex 项目
核心原则：每个需要被 gap 隔开的单元，得是 flex 容器的直接子元素。
- ✅ 正确结构：
<div class="btn"> <i class="icon"></i> <span>保存</span> </div>
- ❌ 错误结构：
<div class="btn"> <span><i class="icon"></i>保存</span> </div>
-
gap只在父容器上设置一次，不用给每个子项加margin - 如果图标是伪元素（
::before），它不属于 DOM 子节点，gap同样无效——得改用真实元素
gap 和 align-items 配合解决垂直对齐问题
图标和文字高度不同、字体渲染差异会导致视觉错位，单靠 gap 解决不了对齐。这时候要配合 align-items：
立即学习“前端免费学习笔记（深入）”；
-
align-items: center是最常用选择，让图标和文字中线对齐 - 如果图标本身带上下留白（比如某些 iconfont），可加
font-display: fallback或用line-height: 1清除干扰 - 避免用
vertical-align—— 在 flex 布局中它已被忽略（除非子项是display: inline-flex等特殊情况） - 示例完整样式：
.btn { display: flex; align-items: center; gap: 6px; } .icon { font-size: 16px; line-height: 1; }
兼容性提醒：IE 不支持 gap，但现代项目基本可忽略
Chrome 84+、Firefox 63+、Safari 14.1+ 都已原生支持 flex 的 gap；Edge 从 88 开始也支持。IE11 及更早版本完全不识别 gap，会静默降级——如果你仍需兼容 IE，只能回退到 margin 手动控制，且注意第一个/最后一个子项的额外 margin 处理。
真正容易被忽略的是：当 flex 容器内有隐藏元素（display: none）或注释节点时，它们不参与 gap 计算，但会影响子元素顺序判断；调试时建议用浏览器开发者工具的“Flexbox overlay”功能确认哪些节点被识别为 item。
