font-size: 0能消除inline-block间隙，因其使html解析生成的空白文本节点失去渲染宽度；需在父容器设font-size: 0，并为每个子元素显式重设font-size（如16px），否则文字不可见。
为什么font-size: 0能消除 inline-block 间隙
间隙不是 CSS 的 bug，而是 HTML 解析器把换行符、空格、制表符当成文本节点渲染的结果——这个文本节点有字体大小，就会占宽度。把父容器的 font-size 设为 0，等于让那个“看不见的空格字符”失去渲染宽度，间隙自然消失。
怎么写才不丢文字、不破布局
直接给父元素加 font-size: 0 后，子元素里的文字会变不见——因为子元素继承了 0，且没覆盖。必须显式重设字号：
- 父容器加
font-size: 0 - 每个 inline-block 子元素单独设
font-size（比如14px、1rem） - 如果子元素里还有嵌套文字（如按钮内含
span），也要确保它们能继承或重设字号
示例：
.nav {
font-size: 0;
}
.nav a {
display: inline-block;
font-size: 16px; /* 必须恢复 */
padding: 8px 12px;
}
容易踩的坑：line-height 和 vertical-align
即使用了 font-size: 0，以下两个问题仍可能让布局错位：
-
line-height过大会放大“基线对齐”的视觉偏差，尤其混用图片和文字时；建议子元素统一设line-height: 1或具体数值（如1.4） -
vertical-align默认是baseline，会导致图片底部悬空一段空白；统一设成top、middle或text-top更稳 - 若父容器有固定高度（如
height: 40px），而子元素line-height+padding超出，可能触发溢出或截断
兼容性和现代替代方案提醒
font-size: 0 在 IE9+、Chrome、Firefox、Safari 全系都可靠，是维护老项目（尤其需兼容 IE9）时最稳妥的选择。但它本质是“绕过问题”，不是解决根源。真正该注意的是：
- 如果你控制得了 HTML 结构，
flex是更干净的解法：display: flex父容器天然无视空白符，无间隙、易对齐、支持换行 - 如果项目已用大量
text-align: center依赖 inline-block 的行内流特性，贸然切 flex 可能要重调居中逻辑 - 别忘了：所有方案都治标，根源永远在 HTML 文本节点——哪怕你写了
font-size: 0，只要源码里留了换行+空格，DOM 里就真有一个空白文本节点存在
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
