inline-block元素间4px间隙源于html解析器将换行符/空格渲染为u+0020文本节点，宽度≈父容器font-size的0.25em；推荐font-size:0+子元素重设字号（ie8+兼容）或现代flex+gap方案。
为什么 inline-block 元素之间总有个“看不见的 4px 间隙”
那个间隙不是你漏写了 margin 或 padding，而是 HTML 解析器把换行符、空格、制表符当作文本节点（U+0020）渲染出来的——只要两个 display: inline-block 元素在源码里不在同一行，中间就夹着一个 #text 节点。它的宽度 ≈ 父容器 font-size 的 0.25em（比如父级设了 font-size: 16px，间隙就是约 4px）。你在开发者工具 Elements 面板里能直接看到它。
font-size: 0 是最稳的解法，但必须写对位置且重置子元素
核心逻辑是让父容器“看不见”那个空格：设 font-size: 0，空格就没了宽度。但它会继承给所有子元素，所以必须显式重置：
-
font-size: 0必须加在**直接包裹 inline-block 子项的父容器**上；套多一层div却没设，完全无效 - 每个含文本的子元素（包括
<input>、<button></button>、<span></span>）都得单独写font-size，不能只写inherit - 如果子元素用了
em单位（如line-height: 1.5或margin: 0.5em），计算结果会归零；应改用无单位数值（line-height: 1.5）或px/rem -
<img>虽无文本，旧版 Safari 仍可能异常，建议统一加font-size: 16px
现代项目优先用 display: flex + gap 替代 inline-block
如果你的最低支持浏览器是 Chrome 89+、Firefox 63+、iOS Safari 14.1+，display: flex 是更干净的解法：
-
gap直接控制间距，不依赖字体大小，媒体查询里改font-size也不用同步调margin - 天然忽略 HTML 空白文本节点，无需删换行、加注释或调
font-size - 无需操心
vertical-align对齐问题，也避免了font-size继承污染 - IE10–11 不支持
gap，可用margin-right: 8px+:not(:last-child)降级
哪些“看起来能用”的做法实际埋坑最深
真实项目里最容易被误用、后期难维护的方案：
- 手删 HTML 换行和空格：格式化工具一跑就还原，协作时极易被覆盖
- 对
或全局容器设font-size: 0：整页文字直接不可见，极难排查 - 用
letter-spacing: -0.31em或transform: scale(0.99)补丁：旧版 Safari 渲染异常，屏幕阅读器仍按原始 HTML 结构解析，可访问性受损 - legacy 代码还没重构完时，有人一边用
font-size: 0，一边又加负margin补丁——补丁本身会触发新的渲染异常，而且无法通过自动化测试覆盖
transform: scale() 或 zoom，部分浏览器下 font-size: 0 的抑制效果会被干扰；子元素若用 em 做尺寸（如 width: 20em），计算结果为 0，这类必须改用 px 或 rem。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
