CSS按钮间距问题：如何消除计算器按钮间的间隙？

问题描述 #

我想要制作一个计算器，让所有按钮紧密贴合，彼此之间没有任何间隙。但即便尝试移除边框、内边距和外边距后，仍存在无法消除的间隙，请问该如何解决？

用户提供的代码：

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

.calculator {
  display: flex;
  width: 200px;
  flex-wrap: wrap;
}

button {
  width: 25%;
}

<div class="calculator">
  <!-- <div class="output"></div> -->
  <div class="calcKeys">
    <button>+</button>
    <button>-</button>
    <button>X</button>
    <button>÷</button>
    <button>7</button>
    <button>8</button>
    <button>9</button>
    <button>=</button>
    <button>4</button>
    <button>5</button>
    <button>6</button>
    <button>1</button>
    <button>2</button>
    <button>3</button>
    <button>0</button>
    <button>.</button>
    <button>AC</button>
  </div>
</div>

问题原因 #

1. 空白字符解析：HTML中按钮标签之间的换行、空格会被浏览器解析为空白字符，这些字符会在按钮（行内块元素）之间产生间隙。
2. 布局层级问题：当前flex布局设置在.calculator上，但按钮的直接父容器是.calcKeys，flex规则并未作用到按钮上，无法消除间隙。

解决方案 #

方法1：移除HTML中的空白字符

将按钮标签连续书写，去掉它们之间的换行和空格，浏览器就不会解析出空白字符：

<div class="calcKeys">
  <button>+</button><button>-</button><button>X</button><button>÷</button><button>7</button><button>8</button><button>9</button><button>=</button><button>4</button><button>5</button><button>6</button><button>1</button><button>2</button><button>3</button><button>0</button><button>.</button><button>AC</button>
</div>

方法2：父容器设置font-size: 0

给按钮的父容器.calcKeys设置font-size: 0消除空白字符占位，同时给按钮单独恢复字体大小：

.calcKeys {
  font-size: 0; /* 消除空白间隙 */
}
button {
  width: 25%;
  font-size: 16px; /* 恢复按钮默认字体大小 */
  border: none; /* 移除按钮默认边框，避免额外间隙 */
}

方法3：修正flex布局作用层级

让按钮直接成为flex子项，将flex布局设置到.calcKeys上，flex布局默认不会保留子元素间的空白间隙：

.calculator {
  width: 200px;
}
.calcKeys {
  display: flex;
  flex-wrap: wrap;
  width: 100%;
}
button {
  width: 25%;
  border: none; /* 移除默认边框 */
}

额外优化：适配按钮数量的布局调整

当前按钮总数为17个，按每行4个排列会有最后一行布局不规整，可以给特定按钮设置flex属性调整宽度，比如让0和AC按钮各占50%宽度：

button:nth-last-child(3) { /* 选中0按钮 */
  flex: 2;
}
button:last-child { /* 选中AC按钮 */
  flex: 2;
}

内容的提问来源于stack exchange，提问作者Anuj