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

本文详解在构建计算器等紧凑型 UI 时，如何通过现代 CSS（尤其是 display: flex 与 gap 属性）精准消除按钮间的不可见间隙，避免传统内联元素空格、换行符导致的布局偏差。

在开发计算器界面时，常会遇到一个看似不起眼却令人困扰的问题：即便已将 margin、padding 和 border 全部重置，按钮之间依然残留着细微缝隙，无法彻底消除。实际上，这一问题的根源并非样式属性，而在于 HTML 本身——按钮标签之间的空格与换行符会被浏览器渲染为约 4px 的文本间距，尤其当按钮使用 inline 或 inline-block 时，现象更为明显。

有人可能会考虑直接删除所有换行和空格，例如写成 12。这种方法确实有效，但会导致代码结构混乱、可读性下降，维护成本高昂。更为优雅且符合现代前端开发实践的方式，是将容器设置为 Flex 布局，并显式控制间隙。

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

.calculator {
  width: 200px;
}

.calcKeys {
  display: flex;
  flex-wrap: wrap;
  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（如字体大小归零、负边距等）；
• 将 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 是首选方案，干净利落，无任何副作用。