使图像显示为块元素

Question

我试图让所有这些图像排成一列。由于某种原因，它在单元格的底部添加了额外的空间。我已经尝试了所有不同的解决方案来解决这个间距问题。

此处还可以查看我的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中读取它），我就没有这个问题。

如果有人可以帮助我，非常感谢你！

Answer 1

所以经过一番摆弄来重现问题之后，我发现了什么是错的（here a JSFiddle of the problem）。

图像默认显示为inline-block，这意味着根据字体大小计算高度。它期待一种字体，因此它默认为font-size（see this answer for more info）。有两种解决方法。

使图像显示为块元素

只需将属性display更改为block

即可

img {
   display: block;
}

JSFiddle

明确指出单元格内没有字体

只需将font-size更改为0

即可

td {
   font-size: 0;
}

JSFiddle

请注意，我仅使用第一个<td>作为示例，这应该适用于所有这些

HTML5表间距问题

1 个答案:

使图像显示为块元素

明确指出单元格内没有字体