答案是空白字符被解析为文本节点所致，font-size: 0 父容器方案最稳妥：父元素设 font-size: 0 消除空格宽度，子元素必须显式重置字号（如 16px），否则文字不可见；该方案 ie8+ 兼容，无副作用。
行内元素之间的“看不见的间隙”不是 bug，是 HTML 解析器把换行符、空格、缩进当作文本节点渲染的结果——它真实存在，且宽度随 font-size 变化。消除它，关键不是“遮盖”，而是控制空白字符是否参与布局。
为什么 font-size: 0 在父容器上有效，但子元素文字却消失了
因为 inline 和 inline-block 元素会继承父级 font-size，而空白字符的宽度由父级字号决定。设为 0 后，那个“空格”的宽度归零，间隙自然消失；但子元素文字也跟着变小到不可见。
- 必须显式重置子元素的
font-size（如16px或1rem） - 若子元素含
em单位（比如padding: 0.5em），其计算基准会变成0，导致 padding 消失——此时改用rem或像素值更安全 - IE8+ 完全支持，无兼容性风险，适合老项目兜底
用 display: flex 替代 inline-block 时，vertical-align 突然失效了
这不是 bug，是 flex 布局的设计逻辑：vertical-align 只对 inline 和 inline-block 生效，对 flex item 完全无效。你之前靠 vertical-align: top “压住”图片底部的技巧，在 flex 下直接不工作。
- 对齐改用
align-items: flex-start（默认是stretch，会拉伸高度） - 若需基线对齐效果，可用
align-items: baseline，但注意：它只对同级 flex item 有效，且不兼容 IE9 及以下 -
gap属性可替代手动margin控制间距，数值稳定、响应式友好
动态插入 HTML（如 jQuery .html()）为什么没间隙，手写却有
因为 jQuery 插入的是字符串，浏览器解析时只按你传入的内容生成 DOM 节点；而手写 HTML 中的换行和缩进会被解析成真实的 Text 节点（Node.TEXT_NODE），并参与行内布局。
- 动态拼接时务必用模板字符串连写：
`<button>-</button><input><button>+</button>`，中间不能有换行或空格 - 避免用
+=多次拼接，容易混入不可见字符 - 若用
$('<div>...</div>')创建 DOM 再追加，jQuery 会先解析字符串为节点树，部分版本可能保留空白——不如直接.html()可控
注释法（<!-- -->）和负 margin 哪个更危险
两者都只是“掩盖”，不是“解决”。注释法物理删掉空白字符，负 margin 则靠视觉覆盖，但后者更危险。
- 负
margin值依赖font-size和font-family，Chrome 下常为-4px，Firefox 可能只要-2px，缩放后还可能错位 - 注释法虽影响可读性，但行为确定、无副作用，适合构建工具自动注入（如 PostHTML）
- 千万别对
input[type="number"]之类表单控件乱设letter-spacing或word-spacing，某些浏览器会干扰 placeholder 渲染
最常被忽略的一点：间隙源头不在 CSS，而在 HTML 的文本节点本身。所以任何方案，本质都是在控制“要不要让那个空格字符进 DOM 树”。选哪种方法，取决于你能否修改 HTML 结构、是否要兼容 IE9、以及有没有全局字体设置干扰计算。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
