HTML中inline-block元素间间隙源于源码换行与空格被解析为文本节点，font-size:0是最稳妥的CSS消除方案，现代布局应优先使用gap、flex或grid。
HTML里“多敲几个空格就多留点空”的想法，从根源上就是错的——浏览器压根不会按你写的空格数去渲染，它只认语义和 CSS。
为什么 inline-block 元素之间总有个 4px 左右的间隙
这不是 bug，是 HTML 解析器把源码中标签间的换行符、缩进空格当成文本节点处理的结果。只要父容器字体大小是 16px，这个空白就会被渲染成约 4px 宽（具体值取决于 font-size 和当前字体度量）。
- 常见触发元素：
button、input、img、span（设了display: inline-block后） - 静态 HTML 中写成多行，间隙必现；动态用
.html()插入紧凑字符串（如`<button>-</button><input><button>+</button>`），间隙消失 - 不同浏览器表现不一：Chrome 约 5px，Firefox/IE 约 4px，国产双核浏览器可能到 8px
font-size: 0 是最稳的 CSS 消隙方案
它直接让空白字符失去渲染宽度，再单独给子元素恢复字号，兼容性好、逻辑清晰、不破坏 DOM 结构。
- 父容器加
font-size: 0，子元素必须显式设置font-size（不能靠继承，否则文字看不见） - 建议配合
vertical-align: middle防止基线对齐错位 - 对
input[type="number"]、select等表单控件有效，但需注意placeholder文字是否正常显示（必要时单独重置） - 别在全局
body上设font-size: 0，否则所有文本都会失效
删源码空白 or 注释隔断？看维护优先级
如果项目不允许引入额外 CSS，或你正在写纯静态页且能接受牺牲可读性，直接连写标签是最轻量解法；若需保留缩进结构，用注释“吃掉”空白更可控。
立即学习“前端免费学习笔记（深入）”；
- 删空白写法：
<div></div> <div></div> <div></div>—— 有效但难维护 - 注释隔断写法：
<div></div> <!-- --><div></div> <!-- --><div></div>—— 保留格式，空白被注释吞掉 - 别用
- 构建阶段自动压缩 HTML（如 webpack 的
html-webpack-plugin+minify）也能解决，但调试时源码不可读
gap / flex / grid 才是现代布局的正解
当你要控制的是一组同类型元素之间的间距，就别再跟空白字符较劲了——用 gap、flex 或 grid，它们天然忽略源码空白，语义明确，响应式友好。
-
display: flex; gap: 12px;可直接替代一堆inline-block+font-size: 0 -
gap支持分别设置横向/纵向：gap: 8px 16px，比老式margin计算干净得多 - 表格内对齐需求？用
display: table-cell已过时，改用display: grid+grid-template-columns更灵活 - 注意：
gap在 IE 中完全不支持，如需兼容，仍得退回font-size: 0方案
真正容易被忽略的点是：空格问题从来不是“怎么多打几个空格”，而是“谁该负责这段距离”——文本内空格归 或 white-space，布局间隔归 CSS，混用只会让问题更隐蔽。
