内联块元素间缝隙源于html空白字符渲染，宽度≈font-size的0.25em；font-size:0可消缝但子元素需重设字号及line-height、margin等；推荐用flex+gap替代，避免负margin、letter-spacing等hack方案。
内联块元素（inline-block）之间的缝隙不是 bug，而是 HTML 解析器把换行符、空格、制表符当作一个空白字符渲染出来的结果——只要源码里有这些空白，缝隙就必然存在，且宽度 ≈ font-size 的 0.25em。
为什么 font-size: 0 能消缝，但子元素必须重设字号
那个缝隙本质是一个“空格字符”，它的宽度由父容器的 font-size 决定。设成 0 后，空格失去字号，自然不占空间。但子元素会继承这个 0，导致文字不可见或 em 计算失效。
- 父容器加
font-size: 0，子元素必须显式写font-size: 14px（或16px等具体值），不能只靠inherit - 如果子元素用了
line-height: 1.5或margin: 0.5em，它们也会因继承0而失效，需一并重置 -
img元素虽无文本，但为保险仍建议加font-size: 16px（部分旧版 Safari 会受影响） - 不要在
body或全局容器上滥用font-size: 0，否则易漏恢复，造成大面积文本不可读
用 flex + gap 替代 inline-block 是更可靠的选择
现代项目中，display: flex 天然无视 HTML 空白字符，不再参与 inline formatting context，从根源上绕过缝隙问题。
-
gap属性直接控制间距，支持gap: 8px、row-gap: 4px、column-gap: 12px，无需猜测像素值 - 所有主流浏览器（包括 iOS Safari 14.1+、Chrome 89+、Firefox 63+）均已稳定支持
gap - IE10–11 不支持
gap，但可用margin-right: 8px+:not(:last-child)模拟，兼容性可控 - Flex 布局下
vertical-align完全失效——这不是缺陷，是设计使然；对齐改用align-items或justify-content更明确
别碰负 margin 和 letter-spacing 这类“硬挤”方案
它们看似快，实际埋雷多，尤其在响应式或字体变更场景下极易失效。
-
margin-left: -4px的值依赖当前font-size：设成18px时缝隙可能变成6px，媒体查询里改字号就得同步调负 margin -
letter-spacing: -0.31em会影响子元素内所有文字间距，且不同浏览器对负值的像素化处理不一致（Chrome vs Safari 差 1px 很常见） - 加了
transform: scale(0.99)或zoom的父容器会让负 margin 失效，调试时很难定位 - 屏幕阅读器仍按原始 HTML 结构解析，这类 hack 可能干扰语义和可访问性
真正容易被忽略的是：当团队有人坚持用 inline-block，其他人又叠加 letter-spacing 或 transform 补丁时，这些补丁本身就会引发新的渲染异常——比如图片模糊、文字断行错乱、焦点框偏移。与其层层打补丁，不如统一迁移到 flex + gap，让布局逻辑回归清晰。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
