HTML5表格间距问题

Question

I'm trying to get all of these images to line up in a table. 我正在尝试将所有这些图像排列在一张桌子中。 For some reason it is adding extra space at the bottom of the cells. 由于某种原因，它在单元的底部增加了额外的空间。 I've tried all of the different solutions that is suppose to fix this spacing issues. 我尝试了所有解决此间距问题的不同解决方案。

What it's supposed to look like 它应该看起来像什么

What I'm Getting 我得到什么

Here's a look at my HTML5 code as well: 这也是我的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>

I've come to the realization that the problem lies within HTML5, because if I remove <!DOCTYPE html> (meaning that the browser won't read it in 5) I don't have this problem. 我已经意识到问题出在HTML5之内，因为如果删除<!DOCTYPE html> （这意味着浏览器不会在5中读取它），我就不会遇到这个问题。

If anyone could help me, Thank you very much! 如果有人可以帮助我，非常感谢！

Answer 1

So after some fiddling around to reproduce the problem, i found what is wrong ( here a JSFiddle of the problem ). 因此，在摆弄一些问题以重现问题之后，我发现了问题所在（这里是问题的JSFiddle ）。

an image is by default displayed as a inline-block , this means that the height is calculated according to the font-size. 默认情况下，图像显示为行inline-block ，这意味着高度是根据字体大小计算的。 It is expecting a font, so it has a font-size by default ( see this answer for more info ). 它需要字体，因此默认情况下具有font-size （有关更多信息，请参见此答案）。 There 2 ways of fixing this. 有2种解决方法。

Make the image display as a block-element 使图像显示为块元素

Simply change the property display to block 只需将属性display更改为block

img {
   display: block;
}

JSFiddle 的jsfiddle

Explicity note that there is no font inside the cell 明确指出，单元格内没有字体

Simply change the font-size to 0 只需将font-size更改为0

td {
   font-size: 0;
}

JSFiddle 的jsfiddle

Note that i used the first <td> only as example, this should work with all of them 请注意，我仅以第一个<td>为例，这应该适用于所有这些

HTML5表格间距问题

问题描述

1 个解决方案

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

Make the image display as a block-element 使图像显示为块元素

Explicity note that there is no font inside the cell 明确指出，单元格内没有字体

HTML5表格间距问题

问题描述

1 个解决方案

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

Make the image display as a block-element 使图像显示为块元素

Explicity note that there is no font inside the cell 明确指出，单元格内没有字体

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