html中换行符、空格等会生成真实文本节点，在inline/inline-block容器中渲染为3–4px间隙；消除间隙最可靠方式是：按钮直接父容器设display:flex+gap:0，且标签间无换行与空格。
文本节点本身会参与渲染并产生间隙
HTML 中的换行符、制表符和空格，在父容器为 inline 或 inline-block 时，会被浏览器解析为“文本节点”，并按当前 font-size 和 line-height 渲染成约 3–4px 宽的空白字符。这个间隙与 CSS 的 margin、padding、gap 全无关系，是 DOM 树真实存在的节点行为。
加标签后为什么间隙变小或消失？
当你把裸文本（如 按钮1 按钮2）改成带标签包裹（如 <button>按钮1</button><button>按钮2</button>），本质是替换了内联文本节点为块级/弹性子项。此时：
- 若父容器是
display: flex，子元素默认为 flex item，不再受文本节点影响 - 但前提是：这些
<button></button>必须是父容器的**直接子元素**；如果中间夹着注释、空格或换行，仍会生成文本节点 - 常见误操作：写成
<div class="calcKeys">\n <button>1</button>\n <button>2</button>\n</div>—— \n 和缩进空格仍是文本节点
为什么有时加了 display: flex 还有间隙？
根本原因不是布局没生效，而是你加 display: flex 的容器不是**最靠近按钮的父级**。例如：
- 按钮在
.calcKeys里，但你只给外层.calculator设了display: flex→ 无效 -
.calcKeys确实设了display: flex，但被后续规则覆盖（比如某个 reset.css 里写了.calcKeys { display: block }）→ 检查 computed 样式中display是否真为flex - 用了
gap: 0却仍有缝隙 → 先确认是否真有多行换行，gap对单行无效；再检查是否混用了margin-bottom，叠加后反而更大
真正可靠的消除方式只有三种
别依赖“看起来没空隙”，要从渲染源头切断：
- 删源码空格：
<button>1</button><button>2</button>连写（适合构建时预处理） - 父容器设
font-size: 0，子项再单独设font-size: 16px（注意input、textarea等替换元素不继承font-size） - 用
display: contents包裹空格节点（Chrome 65+/Firefox 63+ 支持，但不适用于 IE 和旧 Safari）
最稳的选择永远是：确保按钮的直接父容器启用 display: flex + gap: 0，且 HTML 源码中按钮标签之间**没有换行和空格**——其他方案都是在给问题打补丁。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
