为什么这张表2px太大了？

Question

我无法弄明白，为什么这张表102px而不是100px的高度？我还需要设置另一个css属性：

table {
    border-spacing:0;
    border-collapse:collapse;
}

示例：https://jsfiddle.net/0enwstw7/2/

Answer 1

默认情况下，<td>标记上似乎存在填充。这应该解决它：

td {
    padding: 0;
}

Answer 2

<td>元素默认使用1px填充，每边添加一个像素，使总数达到102px。

使用td{padding:0;}

删除它

Answer 3

这是填充td 增加了另外2px;

您已将up div设置为100px，但您正在测量该表。

您可以将td的填充设置为0;

td  {
padding: 0px;
}

Answer 4

尝试删除隐含的td填充，该填充包含在表的整体大小中。足以添加一些这样的指令：

td {
    padding: 0;
}

请参阅：https://jsfiddle.net/0enwstw7/3/

Answer 5

看看这个。

您的浏览器（例如Chrome）有自己的样式表，这就是它将border-spacing: 2px;添加到表中的原因。

如果您想了解有关浏览器特定样式表的更多信息，请查看here。

是的。像这里已经提到过的很多人一样，你可以通过添加

覆盖设置

td {
  padding: 0px;
}

但我仍然认为知道为什么会发生这种情况很重要。

希望这有帮助。