display: inline-block 元素间空隙源于HTML空白符被渲染为空格，宽度约等于父元素font-size×0.25；可通过font-size:0+子元素重设字号、HTML去空格、float+clearfix或flex布局解决，但需注意vertical-align对齐干扰。
为什么 display: inline-block 元素之间总有看不见的空隙
这不是 bug，是 HTML 解析规则导致的：元素间的换行符、空格、制表符会被浏览器当作文本节点渲染成一个空格（相当于 ），而 inline-block 会尊重这个空格，所以产生间距。
常见错误现象：nav 里几个 li 设置了 inline-block，但按钮/菜单项之间总有一小段无法消除的间隙，margin: 0 或 padding: 0 都没用。
- 这个空隙宽度 ≈ 当前父容器的
font-size× 0.25（受字体度量影响，但大致正相关） - 它只出现在
inline和inline-block元素之间，block元素不受影响 - 用
letter-spacing或word-spacing无法精准控制它——它们作用于文字内容，不是布局间隙
font-size: 0 在父容器上生效的条件和副作用
把父容器的 font-size 设为 0，能让那个“空格”失去渲染依据，从而消失。但它不是万能开关，得配合子元素重设字体大小，否则文字就看不见了。
使用场景：导航栏、图标组、响应式图片栅格（非 Grid/Flex 场景下）、需要精确对齐的内联控件组。
立即学习“前端免费学习笔记（深入）”；
- 必须作用在直接包裹
inline-block子元素的父容器上，隔一层就无效 - 所有子元素（包括文字、
input、button）都需要显式设置font-size，否则文字会继承0 - 如果子元素里还有嵌套文字（比如
span里套文字），也要确保它们有可读的font-size，不能只设在父级div - 某些旧版 Android WebView 对
font-size: 0渲染不稳定，极少数情况下会触发缩放异常
nav {
font-size: 0; /* 关键：消灭间隙 */
}
nav a {
display: inline-block;
font-size: 14px; /* 必须重设，否则文字不可见 */
padding: 8px 16px;
}比 font-size: 0 更稳妥的替代方案有哪些
它有效，但破坏了字体继承链，维护成本高，尤其在组件化或 CSS-in-JS 环境里容易漏设子元素字号。真要长期用，得考虑更健壮的解法。
- HTML 去空格写法：
<nav><a>首页</a><a>关于</a><a>联系</a></nav>—— 没换行就没空格，但可读性差，团队协作时易出错 - 用
float: left+clearfix：兼容性最好，但脱离文档流，后续布局需额外处理 - 现代首选
display: flex：父容器设display: flex，间隙天然消失，且支持gap精确控制间距；但 IE10 及以下不支持 - 慎用
letter-spacing: -0.31em类 hack：依赖具体字体和字号，换字体可能失效，也不推荐
容易被忽略的细节：当子元素含 vertical-align 时
即使用了 font-size: 0，如果子元素设置了 vertical-align: top/middle/bottom，仍可能因基线对齐差异造成视觉错位，看起来像“还有缝隙”或“上下不齐”。
这不是空隙问题，而是对齐逻辑干扰了视觉连贯性。
-
vertical-align默认是baseline，而baseline会参考父容器里“假想的文字下降部”，哪怕font-size: 0，这个参考线依然存在 - 统一设为
vertical-align: top或vertical-align: middle能显著改善对齐一致性 - 如果子元素是图片，记得加
vertical-align: top，否则图片底部默认留白（那是 baseline 留给字母 g、y 的空间）
复杂点在于：空隙、对齐、字体继承这三者会叠加影响，单改一个参数往往不够。调试时先关掉 vertical-align 看是否还“错位”，再决定要不要动 font-size 或换布局模型。
