inline-block元素间间隙源于HTML换行/空格被渲染为文本节点；font-size:0可消除但需子元素重设字号；vertical-align仅改变视觉对齐不消除间隙；letter-spacing等属不稳定hack；现代项目推荐Flexbox替代。
为什么 inline-block 元素之间会有看不见的间隙
这个间隙不是 margin 或 padding，而是浏览器把 HTML 中的换行符和空格当作文本节点渲染出来的——就像你在 <span> 里写了空格一样。只要标签在源码里换行或有空格，display: inline-block 就会把它当字符处理，产生约 2–4px 的空白。
用父级 font-size: 0 消除间隙的实操细节
这是最常用也最直接的办法：让那个“看不见的字符”字号为 0，它就缩没了。但要注意子元素必须显式重设 font-size，否则文字也会消失。
- 父容器加
font-size: 0，子元素（如<div class="item">）必须单独设font-size: 14px或其他需要的值 - 如果子元素里还有嵌套文本、按钮、输入框等，它们的字体继承链会被打断，得逐层检查是否漏设
- IE8 及更早版本不支持
font-size: 0对 inline-block 间隙的抑制，实际项目中若需兼容，得另配 hack - 不要对整个页面根元素（
html或body）设font-size: 0，否则所有相对单位（如em、rem）都会崩
vertical-align 影响间隙表现的真相
vertical-align 不是制造间隙的原因，但它会改变间隙的视觉高度——比如设成 top 或 bottom 后，你可能觉得“间隙变小了”，其实只是基线对齐方式变了，元素上下位置偏移导致间隙被遮挡或拉伸。
- 默认值是
baseline，inline-block 元素底部会和父容器内“当前行文字基线”对齐，而基线以下还留有 descender 空间（比如 g、y 的下延部分），这部分会表现为额外空白 - 设
vertical-align: top或vertical-align: middle能缓解视觉错位，但不能真正消除间隙本身 - 如果同时用了
font-size: 0，vertical-align就几乎没影响了，因为那行里已经没有可对齐的文本了
盒模型调整（letter-spacing / word-spacing）的适用边界
letter-spacing: -0.31em 这类写法确实能“挤掉”间隙，但它是副作用驱动的 hack，稳定性差。
立即学习“前端免费学习笔记（深入）”；
-
letter-spacing会影响子元素内所有文字间距，除非你再对子元素设letter-spacing: normal覆盖，否则按钮文字、链接文本全会变紧 - 不同字体、不同字号下，-0.31em 的值并不通用；在高 DPI 屏幕或缩放 125% 时容易失效
-
word-spacing对纯标签无文本内容的 inline-block 几乎无效，因为它只作用于单词之间，而换行符不属于单词分隔符 - 现代项目优先用 Flexbox 替代 inline-block 布局，这类 hack 就不用硬扛了
真正要小心的是：多个方案混用（比如一边 font-size: 0，一边又设 letter-spacing），反而会让调试变得混乱。间隙问题看着小，但一旦嵌套三层以上，或者配合 CSS-in-JS 动态生成样式，很容易漏掉某一层的字体重置。
