为什么CSS中的inline-block元素之间会有默认的空白间距？-css教程-PHP中文网

inline-block间隙不是bug而是HTML规范行为，源于换行符/空格被解析为U+0020文本节点，宽度≈父容器font-size的0.25em；font-size:0方案须作用于直接父容器并重置子元素字号，否则失效。

为什么css中的inline-block元素之间会有默认的空白间距？

inline-block间隙不是bug，是HTML规范行为

这个空白不是你漏写了margin或padding，也不是浏览器渲染错误。它是 HTML 解析器把换行符、空格、制表符当成「文本节点」渲染出来的空格字符（U+0020），宽度 ≈ 父容器font-size的 0.25em（比如font-size: 16px时约 4px）。只要两个display: inline-block元素在源码里不在同一行，这个间隙就必然存在。

font-size: 0 方案为什么常失效？

很多人照着“父设font-size: 0，子设font-size: 16px”写，结果文字消失或布局错乱——问题出在继承链没对齐：

font-size: 0必须加在「直接包裹」这些 inline-block 子元素的父容器上；套多一层div却没设，无效
所有子元素（包括button、input、span）必须显式声明font-size，不能只写inherit
若子元素用了em单位（如line-height: 1.5、padding: 0.5em），计算结果会归零；应改用无单位数值或px/rem
虽无文本，旧版 Safari 仍可能异常，建议统一加font-size: 16px

flex + gap 替代 inline-block 的真实约束

这是当前新项目的首选，但别盲目切：

CSS工具箱(专业版)

全功能 CSS 工程手册，覆盖性能优化、无障碍、设计系统与跨浏览器兼容。

下载

gap在 Chrome 89+、Firefox 63+、iOS Safari 14.1+、Edge 90+ 原生支持；IE10–11 不支持，需回退到margin-right: 8px :not(:last-child)
别在已用vertical-align对齐的旧布局上硬切flex——align-items和vertical-align行为不等价，容易错位
如果父容器本身是inline或受text-align影响，切flex后要检查是否需要补width: 100%或display: block

哪些“手快解法”实际埋了雷

这些做法在协作项目中反复出问题，且很难定位：

手删 HTML 换行：Prettier 一跑就还原，CI 流水线里可能直接报错
全局设font-size: 0（比如加在body上）：整页文字瞬间不可见，且极难定位到根源
叠加letter-spacing: -0.31em或transform: scale(0.99)：旧版 Safari 渲染模糊，屏幕阅读器仍按原始 HTML 结构解析

真正容易被忽略的是：当 legacy 代码还没重构完，有人一边用inline-block，一边又加transform: scale()或letter-spacing补丁——这些补丁本身就会触发新的渲染异常，而且无法通过自动化工具检测。