display: flex 能彻底解决间隙问题，因其脱离行内格式化上下文，HTML 空白字符不被解析为文本节点，缝隙根本不会生成；gap 属性可精确控制间距，且无需重设 font-size 或处理 vertical-align。
直接用 display: flex 替代 inline-block，能从根源上避开间隙问题；负 margin 是临时补丁，值难固定、响应式下极易失效。
为什么 display: flex 能彻底解决间隙
Flex 布局脱离了「行内格式化上下文（IFC）」，HTML 换行符、空格、注释不再被解析为参与布局的文本节点——缝隙根本不会生成，不是被“压”掉，而是压根不存在。
-
gap属性可精确控制间距，比如gap: 8px、row-gap: 4px，不依赖字体大小或渲染差异 - 所有现代浏览器（Chrome 89+、Firefox 63+、Safari 14.1+、Edge 89+）已稳定支持
gap；IE10–11 不支持gap，但可用margin-right: 8px+:not(:last-child)安全降级 -
vertical-align在 flex 中完全失效——这不是 bug，是设计使然；对齐统一用justify-content或align-items，语义更清晰 - 子元素无需重设
font-size、line-height或margin，避免因继承0导致 em 单位计算崩坏
负 margin 为什么总出问题
它不是在修复问题，而是在视觉上“硬盖住”缝隙，但缝隙本身还在 DOM 和渲染树中，随时可能暴露。
- 缝隙宽度 ≈ 父容器
font-size的 0.25em，font-size: 16px时约 4px，font-size: 18px时就变成约 4.5px——你写的margin-left: -4px在媒体查询里一改字号就错位 - 加了
transform: scale(0.99)或zoom的父容器会让负margin失效，调试时很难定位 -
letter-spacing: -0.31em会污染子元素所有文字间距，且不同浏览器对负值像素化处理不一致（Chrome vs Safari 差 1px 很常见） - 屏幕阅读器仍按原始 HTML 结构解析，这类 hack 可能干扰语义和可访问性
哪些情况还可能漏掉缝隙
很多人以为删掉换行就万事大吉，结果发现还有缝——因为这些也生成文本节点：
立即学习“前端免费学习笔记（深入）”；
- HTML 注释：
<!-- -->两侧若有空格或换行，照样触发缝隙 - 伪元素内容：
::before { content: " " }或content: ""后跟空格，也会参与 IFC 渲染 - JS 动态插入的文本节点（哪怕只含一个空格），如果父容器是
inline-block流，同样会撑开间隙 -
<img alt="如何解决CSS内联块元素间的间隙问题_使用Flex布局或负Margin" >标签虽无文字，但在旧版 Safari 中若父级font-size: 0未显式恢复，部分图像渲染仍可能异常
真正容易被忽略的是：当团队有人坚持沿用 inline-block，其他人又叠加 transform 或 letter-spacing 补丁时，这些层叠的 hack 会相互干扰，让问题从“4px 缝隙”演变成“随机错位+读屏器失声+响应式崩溃”。
