如何减小HTML表格单元格的所有间距？能否进一步缩减内边距？

要彻底缩减表格单元格的所有间距，需要从单元格内边距、单元格间边框间距和字体行高三个方面调整，以下是具体实现：

1. 移除单元格内边距 #

默认浏览器会给<td>元素添加少量内边距，直接设置padding: 0就能消除内容与单元格边框的间距：

#table1 td {
  font-size: 200px;
  padding: 0; /* 清除单元格内边距 */
}

2. 消除单元格间的边框间距 #

表格默认会在单元格边框之间保留间隙，通过以下CSS属性合并边框、清除间距：

#table1 {
  border-collapse: collapse; /* 合并相邻单元格的边框 */
  border-spacing: 0; /* 强制设置单元格间间距为0 */
}

3. 缩减字体行高带来的额外间距 #

大字号文本默认会有较大的行高，导致单元格上下出现多余空间，将line-height设为1或与字体大小一致即可解决：

#table1 td {
  font-size: 200px;
  padding: 0;
  line-height: 1; /* 匹配字体行高，消除上下留白 */
}

完整代码示例 #

最终的CSS和HTML代码如下：

#table1 {
  border-collapse: collapse;
  border-spacing: 0;
}

#table1 td {
  font-size: 200px;
  padding: 0;
  line-height: 1;
}

<table id="table1" border="1">
  <tr><td>1</td></tr>
</table>

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