详细讲解在构建计算器等紧凑型 UI 时，如何利用现代 CSS 的display: flex与gap属性，精准消除按钮间的不可见间隙，避免因内联元素空格和换行符引发的布局偏差。
在开发计算器界面时，你很可能遇到过这样一个看似微小却令人困扰的问题：尽管已经重置了所有 margin、padding 和 border，按钮之间仍然存有无法消除的间隙。这个问题的根源并非 CSS 样式，而是 HTML 中的空格和换行符——浏览器会将其渲染为约 4px 的文本间距，尤其当按钮使用 inline 或 inline-block 时，这一现象更为显著。
也许你会想，直接删除所有换行和空格不就行了？例如写成 。这种方法确实有效，但会严重破坏代码的可读性和可维护性。更优雅且符合现代前端实践的方案，是将容器设置为 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 是首选方案，简洁高效，无任何副作用。
