Flexbox能根治inline-block间隙问题，因其脱离行内格式化上下文，HTML空白字符不被解析为文本节点，缝隙根本不会生成；gap是布局层原生间距控制机制，精准、稳定、无需hack。
Flexbox 能根治 inline-block 的间隙问题，因为它不依赖 HTML 源码格式，gap 是布局层原生控制机制，而 inline-block 的间隙是 HTML 文本节点渲染结果，本质不可控。
inline-block 间隙不是 CSS bug，而是 HTML 解析行为
你在源码里写换行或空格，浏览器会把它们当作文本节点渲染——这个“间隙”宽约 0.25em（比如父元素 font-size: 16px 时约 4px），它：
- 不响应
margin、padding或box-sizing - 在开发者工具里不可见，不是盒模型的一部分
- 随
font-size变化而变化，DPR 缩放、系统放大都会影响实际像素值 - 哪怕你用
letter-spacing: -0.31em补，图片可能模糊，文字可能挤叠
flex + gap 是布局层的真正解法
gap 不是 hack，是 Flex（和 Grid）规范定义的间距属性，它作用于项目之间，与内容、基线、换行无关：
- 不依赖 HTML 源码是否换行、是否有注释、是否压缩
- 高 DPI 屏、缩放模式下依然精准，不靠固定像素假设
- 无需重设子元素
font-size或line-height，避免继承污染 - 配合
flex-wrap: wrap自动换行，不会像浮动那样卡位错乱
示例：display: flex; gap: 12px; flex-wrap: wrap; —— 一行写完，所有间距、换行、对齐就到位。
PigX UI 前端开发
下载
PigX UI Pro 前端开发指南 - Vue 3 + TypeScript + Element Plus。当用户提到 PigX UI、PigX 前端、lgb-mgui 项目、Vue 3 企业级后台开发、Element Plus 后台开发时使用此技能。
立即学习“前端免费学习笔记（深入）”；
IE10+ 支持 flex，但 gap 需要降级处理
如果你仍需兼容 IE10–11（已终止支持，但部分政企内网仍在用），display: flex 可用，但 gap 不被识别。此时可：
- 用
margin-right: 12px+:not(:last-child)降级 - 避免在
flex-direction: column下用margin-bottom，因为换行后最后一行末尾会多出空白 - 别混用
gap和margin，容易叠加导致间距翻倍
真正容易被忽略的复杂点：响应式折叠时的 order 控制
当导航需要从横向菜单转为移动端汉堡菜单时，flex-direction: column + order 可自然重排结构；而 inline-block 方案只能靠 display: none/block 切换，DOM 顺序和视觉顺序脱节，无障碍和 SEO 都受影响。这不是间隙问题本身，但正是 gap + flex 组合带来的延伸收益——它让布局逻辑和语义保持一致。
