按钮间空格是HTML解析行为，因button为inline-block元素，源码中换行缩进被解析为文本节点空格；可用font-size:0清空父容器空白或flex+gap替代，动态JS拼接时也需避免字符串换行。
按钮间空格是 HTML 解析行为，不是 CSS 问题
按钮（<button>）默认是 inline-block 元素，当它们在 HTML 源码中换行或缩进书写时，浏览器会把换行符和空格解析为一个文本节点，并渲染成一个“空格宽度”的间隙——这跟你在 <p> 里敲多个空格被折叠成一个，是同一套规则，但影响位置不同：这里它出现在元素之间，直接撑开布局。
常见错误现象包括：<button>-</button>\n<input type="number">\n<button>+</button> 渲染后按钮和输入框之间有约 4px 空隙；用开发者工具看 DOM 树“没差别”，但视觉就是不对。
用 font-size: 0 快速清空父容器空白
这是最稳定、兼容性好、且不影响表单控件内部文字的方案。原理是：空白字符的渲染宽度依赖于父元素的 font-size，设为 0 后，那个“空格”就没了宽度，但子元素自己重置 font-size 后文字照常显示。
- 父容器（如
<div class="btn-group">）加font-size: 0 - 所有子按钮、
<input>等内联级子元素单独设font-size: 14px（或继承所需值） -
<input type="number">的 placeholder 文字不受影响，无需额外 hack - 注意：不要对整个页面根元素设
font-size: 0，否则全局文字消失
用 Flexbox + gap 替代“手动留空”
如果你控制的是容器结构，display: flex 配合 gap 是语义清晰、响应友好、且完全绕过空白解析问题的现代解法。它不依赖 HTML 字符串格式，也不污染字体设置。
立即学习“前端免费学习笔记（深入）”；
- 给包裹按钮的父元素设
display: flex和gap: 8px（单位可为px、em或rem） - 无需给每个按钮加
margin，gap自动作用于相邻项之间，首尾无额外间距 -
gap在 Safari 14.1+、Chrome 89+、Firefox 63+ 均已稳定支持，IE 不支持（需降级用margin） - 若需兼容老版本 Safari，可用
justify-content: space-between+ 单独控制首尾 margin
动态插入时字符串不能带换行和空格
用 JavaScript（比如 element.innerHTML = '...' 或 jQuery 的 .html()）拼接按钮时，如果字符串含换行或缩进，照样会触发空白渲染——因为浏览器仍按 HTML 解析规则处理那段字符串。
- 必须写成紧凑形式：
<button>-</button><input type="number" value="1"><button>+</button> - 避免模板字符串中无意换行：
`<button>-</button>\n<input>`→ 这个\n就是罪魁祸首 - jQuery 的
$().append(htmlString)行为与原生一致，不自动 strip 空白 - 用
document.createElement手动构建再 appendChild 可彻底规避，但成本高，一般没必要
