按钮奇怪的余量

Question

我正在观察按钮之间的这个奇怪的边缘，我无法弄清楚。查看截图

这是通过Chrome检查器完成的。所有按钮都是一样的。如您所见，每个都有一个右下边距，但没有左边距。这就是为什么我无法理解为什么按钮2和按钮3的边距之间存在差距。

在Chrome和Safari上测试。

以下是HTML代码（分页按钮位于tfoot的{​​{1}}）：

table

Answer 1

这是因为HTML会在按钮之间呈现空白区域。

如何修复它：

1. 放置包装font-size: 0;和按钮font-size: 16px;
2. 将评论应用于您的布局：

</button><!--
--><button>

3。向左浮动按钮

Answer 2

按钮元素之间的空白区域被视为单个空格。将按钮粘在一起将其取下：

<button></button><button></button>

或者在他们之间添加HTML评论：

<button></button><!--
--><button></button>

或者如果使用PHP等，在它们之间添加开始/结束标记以避免HTML空间：

<button></button><?php
?><button></button>

或者通过将包装器的字体大小设置为0以避免空间具有任何宽度（然后将按钮上的字体大小设置为正常）。

td {
  font-size: 0;
}
td button {
  font-size: 1rem;
}