HTML5表格间距问题

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

因此，在摆弄一些问题以重现问题之后，我发现了问题所在（这里是问题的JSFiddle ）。

默认情况下，图像显示为行inline-block ，这意味着高度是根据字体大小计算的。 它需要字体，因此默认情况下具有font-size （有关更多信息，请参见此答案）。 有2种解决方法。

使图像显示为块元素

只需将属性display更改为block

img {
   display: block;
}

的jsfiddle

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

只需将font-size更改为0

td {
   font-size: 0;
}

的jsfiddle

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

HTML5表格间距问题

问题描述

1 个解决方案

解决方案1
0 已采纳 2015-11-03 18:24:57

使图像显示为块元素

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

HTML5表格间距问题

问题描述

1 个解决方案

解决方案1 0 已采纳 2015-11-03 18:24:57

使图像显示为块元素

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

解决方案1
0 已采纳 2015-11-03 18:24:57