行内块元素间存在看不见的空隙，是因为换行或空格被渲染为文本节点，受父容器font-size和line-height影响；font-size:0可解决但需作用于直接父容器并重设子元素字号。
行内块元素之间为什么会有看不见的空隙
因为 <span></span>、<a></a>、<img alt="CSS行内块间距在不同浏览器空格问题_通过父容器font-size归零处理" > 这类默认 display: inline-block 的元素会响应父容器的 font-size 和 line-height，把换行或空格符当成文本节点渲染——哪怕你代码里只写了回车，浏览器也会当做一个「空格字符」来占位。
常见错误现象：margin 设为 0 但元素间仍有 2–4px 间隙；用 vertical-align: top 也压不掉；Flex 布局没启用时尤其明显。
- 这不是 bug，是 CSS 规范对 inline-level 元素的正常处理
- 移动端 Safari、旧版 IE、Chrome 都有，表现一致，不是兼容性问题而是行为一致性问题
- 只要父容器有非零
font-size，且子元素是inline或inline-block，空隙就存在
font-size: 0 在父容器上真能解决吗
能，但得用对地方。关键是把「产生空隙的上下文」的 font-size 归零，而不是随便套个 class 就完事。
使用场景：导航栏菜单项（<li> + <a></a>）、图标按钮组、响应式栅格中手动拼的行内块卡片。
立即学习“前端免费学习笔记（深入）”；
- 必须作用于直接包裹这些行内块的父容器，比如
<nav></nav>、<div class="icon-group"> <li>子元素自身要重设 <code>font-size（否则文字消失），例如a { font-size: 14px; } - 如果子元素含
<img alt="CSS行内块间距在不同浏览器空格问题_通过父容器font-size归零处理" >，它本身无文字，但父容器font-size: 0后仍需确认vertical-align，否则可能底部多出空白
nav {
font-size: 0;
}
nav a {
font-size: 16px;
display: inline-block;
}
还有没有更稳妥的替代方案
有，但要看约束条件。不是所有场景都适合 font-size: 0，比如父容器本身要显示文字、或需要继承字体大小做响应式缩放。
-
flex布局最干净：父容器设display: flex，空隙天然消失，且支持对齐/换行控制 - HTML 去空格写法有效但难维护：
<span></span><span></span>连写，不换行不加空格——上线前容易被格式化工具打回原形 -
letter-spacing: -0.31em在父容器上可压缩间隙，但不同字号下负值需微调，iOS Safari 对该属性支持不稳定
为什么有时候 font-size: 0 失效了
大概率是层级或继承干扰了。这个技巧看似简单，实则对 CSS 作用域很敏感。
- 父容器用了
rem或em单位设置font-size，而子元素又用em计算尺寸，归零后导致子元素尺寸塌缩 - 父容器本身是
inline元素（如<span></span>），无法承载font-size设置（除非显式设display: block或inline-block） - CSS 优先级被更高权重规则覆盖，比如某个 UI 框架的 reset.css 把
font-size强制设回 16px
查问题最快方式：在 DevTools 里选中父容器，看 computed 标签下 font-size 真实值是不是 0px；再点开子元素，确认其 font-size 是否已显式重置。
空隙问题从来不在元素本身，而在它所处的格式化上下文——这点容易被忽略，但决定了你是调样式还是改布局思路。
