彻底消除CSS按钮间隙的完整方法

详细讲解在构建计算器等紧凑型 UI 时，如何利用现代 CSS 的 display: flex 与 gap 属性，精准消除按钮间的不可见间隙，避免因内联元素空格和换行符引发的布局偏差。

在开发计算器界面时，你很可能遇到过这样一个看似微小却令人困扰的问题：尽管已经重置了所有 margin、padding 和 border，按钮之间仍然存有无法消除的间隙。这个问题的根源并非 CSS 样式，而是 HTML 中的空格和换行符——浏览器会将其渲染为约 4px 的文本间距，尤其当按钮使用 inline 或 inline-block 时，这一现象更为显著。

也许你会想，直接删除所有换行和空格不就行了？例如写成 12。这种方法确实有效，但会严重破坏代码的可读性和可维护性。更优雅且符合现代前端实践的方案，是将容器设置为 Flex 布局，并通过 gap 属性显式控制间隙。

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.calculator {
  width: 200px;
}

.calcKeys {
  display: flex;
  flex-wrap: wrap;
  gap: 0; /* 核心：通过 gap:0 完全消除项目间隙，包括主轴和交叉轴 */
}

.calcKeys button {
  flex: 0 0 calc(100% / 3); /* 实现精确三列布局：约等于 33.333% */
  /* 亦可使用 width: 33.33%，但 calc() 更稳健，避免四舍五入带来的布局偏移 */
  height: 50px;
  border: none;
  background: #f0f0f0;
  font-size: 16px;
  cursor: pointer;
}

✅ 关键要点说明：

• gap: 0 是现代 CSS 中最直接、最可靠的消除 Flex/Grid 项目间隙的方式，完全替代了旧版 hack（如 font-size: 0、负边距等）；
• 将 display: flex 应用于 .calcKeys 容器（而非外层 .calculator），使按钮成为其直接子项，确保 gap 生效；
• 使用 flex: 0 0 calc(100% / 3) 而非固定 width: 33.33%，可以避免因浮点精度导致的最后一行错位（例如 17 个按钮排列为 6 行 × 3 列 + 1 行 × 2 列，calc() 动态计算更稳定）；
• 无需修改 HTML 结构，保留清晰的缩进与换行，兼顾开发体验与渲染效果。

补充说明：若项目仍需兼容 IE 浏览器（不支持 gap），可回退至 font-size: 0 配合子元素字体重置的传统方案。对于绝大多数现代项目（Chrome、Firefox、Safari、Edge 2021 年及之后版本），gap: 0 是首选方案，简洁高效，无任何副作用。