inline-block元素间4px间隙源于HTML解析器将换行符、空格等空白符解析为U+0020空格字符，在IFC中渲染，其宽度≈父容器font-size的0.25em（如16px时约4px）；Chrome常为5px，Firefox/IE为4px，部分国产浏览器可达8px。
inline-block 元素间 4px 间隙是怎么来的
不是 CSS 写错了，也不是 margin 没清干净——是 HTML 解析器把换行符、缩进空格当成了 U+0020 空格字符，在行内格式化上下文（IFC）里渲染出来。这个“间隙”宽度 ≈ 父容器 font-size 的 0.25em（比如 font-size: 16px 时约 4px），不同浏览器还略有差异：Chrome 是 5px，Firefox 和 IE 是 4px，部分国产浏览器能到 8px。
font-size: 0 是最稳的兼容方案，但必须重置子元素字号
给直接包裹 inline-block 子项的父容器设 font-size: 0，再为每个含文本的子元素显式声明字号。漏掉任何一处，文字就会消失或布局塌陷。
-
font-size: 0必须写在**紧邻子元素的父容器**上，套多一层 div 却没设，完全无效 - 所有子元素会继承
font-size: 0，所以button、input、span等必须单独写font-size: 16px或font-size: 1rem - 慎用
em单位（如line-height: 1.5em），它会按 0 计算结果；改用无单位值（line-height: 1.5）或px/rem -
img虽无文字，旧版 Safari 仍可能异常，建议统一加font-size: 16px
现代项目优先用 flex + gap 替代 inline-block
如果你支持 Chrome 89+、Firefox 63+、iOS Safari 14.1+，display: flex 是更干净的选择：gap 直接控制间距，不依赖字体大小，响应式友好，也绕开了 vertical-align 对齐难题。
-
gap不受源码空白影响，HTML 换行、缩进完全无关 - 回退可配
margin-right: 8px+:not(:last-child)，比负 margin 更可控 - 避免用
letter-spacing或transform: scale()补丁——屏幕阅读器仍按原始结构解析，且易引发新渲染异常
手删 HTML 空格看似简单，实际最难维护
把 写成一行确实零间隙，但牺牲了可读性。工程化构建中 HTML 压缩工具（如 html-minifier）会自动做这事；但开发阶段一旦用 Prettier、VS Code 自动格式化，立刻还原换行和空格，间隙重现。
- 团队协作时，靠“大家自觉不换行”不可靠
- 注释隔断（
）代码臃肿，容易漏删或误删 -
margin-left: -4px在媒体查询里改字号就得同步调，Chrome/Safari 渲染偏差还可能导致 1px 错位
真正难处理的是那些嵌套深、跨多个组件、又得兼顾老浏览器的场景——这时候 font-size: 0 的重置逻辑必须写进基础样式层，不能靠临时 patch。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
