为什么图像不占据整个td内容区域？

Question

我有一个HTML表格，我想将图像显示为<td>元素的内容，并使图像占据整个<td>内容区域，因此，我做了以下事情：

<td id="my-img">                
<img border="0" src="images/my.png" alt="Logo" width="60px"/>                  
</td>

我还使用CSS来定义<td>的宽度，其宽度值与<image>标记相同：

#my-img{
 width: 60px;
}

但是，图像不会占据整个<td>区域，图像周围总会有白色空间，为什么？如何摆脱它？ （我确定空白区域不是来自PNG图像文件）

Answer 1

尝试Nick Brunt写的内容，但也包括以下图片的css：

margin: 0px; 

Answer 2

两件事：

首先，在将宽度定义为html标记的属性时，您不需要px，只需要width="60"即可。

其次，图像周围的空间可能是由表格单元格周围的填充引起的。添加此CSS：

#my-img{
 width: 60px;
 padding: 0px;
}

作为旁注，只需更改图片的宽度就可以使其拉伸，您需要确保更改高度，否则宽高比将会关闭。

Answer 3

默认情况下，表格单元格在其上有填充，这会从边框中推送内容。

您可以这样做：

<table cellpadding="0">

或者你可以做

<td style="padding: 0">

取决于您是否要将零填充应用于所有表格单元格或仅应用于该特定表格单元格。

此外，在您的问题中提供整个表可能会让我们进一步帮助您。

Answer 4

为您的html文档尝试不同的doctype： http://www.w3schools.com/tags/tag_doctype.asp XHTML有时可以解决类似的问题。

如果这没有用，请考虑使用my.png作为background-repeat：no-repeat css样式的背景。

#my-img{
  width: 60px;
  background: no-repeat url(images/my.png);
}