inline-block按钮间4px空隙是html解析换行/空格为文本节点所致；font-size:0+子元素恢复字号最稳妥；vertical-align解决对齐非间隙；flex布局天然无隙且更可控。
为什么 inline-block 按钮之间总多出 4px 空隙
这不是 bug，是 HTML 解析器把换行符和空格当作文本节点渲染的结果。你写成：
<button class="btn">保存</button> <button class="btn">取消</button>
浏览器实际会插入一个空格字符，宽度约等于 font-size 的 0.25em（常见为 4px）。按钮并排时，这个空格参与行内布局，导致无法严格贴边。
font-size: 0 是最稳妥的 CSS 方案
给按钮父容器设 font-size: 0，空格失去“字号”基础，间隙自然消失；再单独给按钮恢复字号即可。
- 必须同时设置子元素
font-size，否则按钮文字不可见 - Chrome 已取消最小字体限制，
-webkit-text-size-adjust: none不再需要 - 如果父容器本身有文本内容（比如标题），不能直接设
font-size: 0，需用 wrapper 隔离
示例：
.btn-group {
font-size: 0;
}
.btn-group .btn {
font-size: 14px; /* 或 rem/em 单位 */
display: inline-block;
}
vertical-align 不解决间距，但能修复对齐错位
vertical-align 默认值是 baseline，混用按钮和图标或文字时，底部常出现“悬空”——这不是间距，是基线对齐导致的视觉错位。
- 统一设
vertical-align: top或middle可立即对齐 - 若用了
font-size: 0，vertical-align仍需显式设置，否则部分浏览器可能回退到 baseline - 避免设
vertical-align: baseline，尤其在含图片的按钮里
flex 布局是新项目的默认选择
如果你不需要兼容 IE9 及更早版本，直接用 display: flex 替代 inline-block，天然无间隙、对齐可控、响应式友好。
- 父容器加
display: flex，按钮自动左对齐，无需vertical-align - 用
gap主动控制间距，比“消除间隙”更可控 - IE10+ 支持
display: flex，但 IE10/11 不支持gap，需 fallback 用margin
示例：
.btn-group {
display: flex;
gap: 8px; /* Chrome 100+ / Firefox 104+ 支持 */
}
.btn-group .btn {
flex: none; /* 防止按钮被压缩 */
}
真正麻烦的不是选哪种方法，而是混合使用时互相干扰：比如设了 font-size: 0 却忘了恢复按钮字号，或加了 flex 还留着 display: inline-block —— 浏览器会按后者优先级覆盖前者。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
