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 元素在源码中不在同一行，中间就生成一个文本节点。它的宽度 = 父容器当前 font-size 的 0.25em（比如 font-size: 16px 时约 4px）。开发者工具 Elements 面板里能看到两个元素之间夹着 #text 节点，这就是“幽灵空白”的真身。
font-size: 0 是最稳的现场急救法，但继承陷阱必须避开
核心逻辑是让父容器“看不见”那个空格：设 font-size: 0，空格就没了宽度。但它会继承给所有子元素，所以必须显式重置：
-
font-size: 0必须加在**直接包裹 inline-block 子项的父容器**上；套多一层 div 却没设，完全无效 - 每个含文本的子元素（包括
<input>、<select></select>、<button></button>）都得单独写font-size，不能只写inherit - 如果子元素用了
em单位（如width: 20em或line-height: 1.5），计算结果会变成 0；应改用无单位数值（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属性直接控制间距，不依赖字体大小，响应式友好 - 无需操心
vertical-align对齐问题，也避免了font-size继承污染 - 回退方案可用
margin-right: 8px+:not(:last-child)，比负 margin 更可控 - 不要用
letter-spacing、word-spacing或transform: scale()补丁——这些会触发新渲染异常，且屏幕阅读器仍按原始 HTML 结构解析
哪些“看似有效”的做法实际埋坑最深
真实项目里最容易被误用、后期难维护的方案：
- 手删 HTML 换行和空格：牺牲可读性，代码格式化工具一运行就还原
- 用
<!-- -->注释隔开：代码臃肿，协作时容易漏删或误删 -
margin-left: -4px：缝隙宽度随font-size变化，媒体查询里改字号就得同步调；Chrome/Safari 渲染差异还可能导致 1px 偏差 - 对
或全局容器设font-size: 0：极易遗漏恢复，整页文字消失
最常被忽略的一点：伪元素（::before/::after）里插纯空格，或者注释位置不对，照样会生成 #text 节点参与布局。检查 Elements 面板，确认两个 inline-block 元素之间是否真的“干净”。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
