我试图让所有这些图像在表格中排列。出于某种原因，它在单元格底部添加了额外的空间。我已经尝试了所有可以解决此间距问题的不同解决方案。
What it's supposed to look like
下面是我的 HTML5 代码:
<!DOCTYPE html> <html>
<head>
<title></title>
<meta charset = "utf 8">
<style>
table{
border-collapse : collapse;
border-spacing : 0;
border:0;
}
tr,td{
border-collapse:collapse;
padding : 0;
border : 0;}
</style>
</head>
<body>
<table>
<tr>
<td><img src="tableImages\ul.gif" alt ="1,1"></td>
<td colspan = "2"><img src ="tableImages\top.gif" alt = "1,2"></td>
<td><img src="tableImages\ur.gif"alt="2,2"></td>
</tr>
<tr>
<td rowspan = "2"><img src="tableImages\left.gif"alt="2,1"></td>
<td><img src="tableImages\1.gif"alt="2,1"></td>
<td><img src="tableImages\2.gif"alt="2,1"></td>
<td rowspan = "2"><img src="tableImages\right.gif"alt="2,1"></td>
</tr>
<tr>
<td><img src="tableImages\3.gif"alt="2,1"></td>
<td><img src="tableImages\4.gif"alt="2,1"></td>
</tr>
<tr>
<td><img src="tableImages\ll.gif" alt ="1,1"></td>
<td colspan = "2"><img src ="tableImages\bottom.gif" alt = "1,2"></td>
<td><img src="tableImages\lr.gif"alt="2,2"></td>
</tr>
</table>
</body> </html>
我已经意识到问题出在 HTML5 中，因为如果我删除 <!DOCTYPE html> (意思是浏览器不会在5中读取它)我没有这个问题。
如果有人能帮助我，非常感谢!
最佳答案
所以在反复尝试重现问题之后，我发现了问题所在 ( here a JSFiddle of the problem )。
图像默认显示为 inline-block ，这意味着高度是根据字体大小计算的。它需要一种字体，所以它有一个 font-size默认情况下 ( see this answer for more info )。有两种方法可以解决这个问题。
将图像显示为 block 元素
只需更改属性display至 block
img {
display: block;
}
明确说明单元格内没有字体
只需更改 font-size至 0
td {
font-size: 0;
}
请注意，我使用了第一个 <td>仅作为示例，这应该适用于所有这些
关于css - HTML5 表格间距问题，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/33506086/