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

下面就来看看我的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中读取）我没有这个问题。

如果有人能帮助我，非常感谢！

来源

2015-11-03 Brian Meek

你有很多的HTML错误的代码。将其传递给https://validator.w3.org/等验证程序，并查看它的内容。请注意，该页面上还有一个CSS验证程序。 – kojow7

据我所知，这不会是最高达W3标准的最漂亮的代码。我只是在为学校做实验室工作。 –

这不是我推荐的漂亮代码。这是正确的代码。如果你的代码不正确，可能会导致各种问题和事情在不同的浏览器中无法正确显示。如果您的代码在运行时遇到问题，那么您的第一步就是修复其中的任何错误。在这种情况下，这不会导致您的问题，但现在修复您的代码可以帮助您防止发生任何未来问题。此外，如果标记实验室的人员拥有不同的浏览器，即使浏览器对错误没有任何问题，他们也可能会遇到问题。 – kojow7

因此，经过一些摆弄重现问题后，我发现有什么不对（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>为例，这应该与他们的工作

来源

2015-11-03 18:24:57 nkmol

非常感谢。你的解决方案完美运作我不认为我会得出这个结论，所以非常感谢你 –

HTML5表格间距问题

回答

使图像显示为块元件

明确地注意到，有细胞

相关问题