font-size: 0配合子元素重设字号是最稳、兼容性最好（IE8+）、副作用最小的解法；因HTML解析将换行/空格转为U+0020文本节点，宽度≈父容器font-size的0.25em，仅影响inline/inline-block元素。
直接用 font-size: 0 配合子元素重设字号，是最稳、兼容性最好、副作用最小的解法。
为什么格式化 HTML 会产生间隙
HTML 源码里的换行、缩进、空格，在解析时会被当成一个文本节点（U+0020），其宽度 ≈ 父容器 font-size 的 0.25em。当子元素是 inline 或 inline-block 时，这个空白就会渲染成固定间距——常见为 4px 左右，但会随字体大小浮动。
这不是 margin，不是 padding，开发者工具里选中元素也看不到它；删掉样式或改 vertical-align 都压不住，因为根源在 DOM 结构本身。
- 常见现象：
<nav>菜单项错位、<img>栅格中间漏白线、按钮组对不齐 - 动态插入（如 jQuery
.html()连写字符串）没这问题，因为没换行/空格 - 静态 HTML 一旦格式化（可读性强），间隙就必然出现
font-size: 0 怎么写才不出错
核心是“父容器清空空白宽度，子元素恢复文字显示”，漏一步就全挂。
立即学习“前端免费学习笔记（深入）”；
- 父容器必须设
font-size: 0，比如.nav { font-size: 0; } - 所有直系子元素要显式设回字号，比如
.nav > a, .nav > button { font-size: 16px; } - 如果子元素含
<input>或<select>，它们可能继承异常，需单独加font-size - 子元素若用
em单位（如padding: 0.5em），得同步检查是否因父级font-size: 0导致计算为 0 —— 此时建议改用rem或px
什么时候该换 display: flex
如果你控制得了父容器样式，且不需要支持 IE9 及更早版本，display: flex 是一劳永逸的替代方案：间隙天然消失，gap 还能精准控距，justify-content 居中也不再受 text-align 干扰。
- 写法简单：
.nav { display: flex; justify-content: center; gap: 8px; } - 子元素不用再设
display: inline-block，保持block或默认都行 - 注意副作用：flex 容器内
text-align: center失效；原依赖vertical-align对齐的逻辑要改成align-items或align-self - IE10+ 全支持，但若项目仍需跑 IE9，就不能用
HTML 注释法适合什么场景
只在不能动 CSS、又必须快速修复线上页面时用。比如 CMS 输出的模板无法覆盖样式，或第三方组件封装太死。
- 写法：
<div class="item">A</div><!-- --><div class="item">B</div> - 注释必须紧贴标签，前后不能有空格，否则空格还在
- 构建工具（如 HTML minifier）可能自动删注释，导致间隙重现 —— 要确认压缩配置是否保留注释
- 长期维护成本高，结构杂乱，不推荐新项目采用
真正容易被忽略的是：间隙问题从来不是孤立存在的。它常和 vertical-align: baseline、line-height、父容器 padding 或 text-align 交互出更诡异的效果。别只盯着“删空格”，先看清楚当前上下文用的是哪套布局逻辑，再选对应解法。
