HTML 表格单元格中的附加空格答案

【问题标题】：Additional whitespace in HTML table cellHTML 表格单元格中的附加空格
【发布时间】：2014-07-20 05:43:40
【问题描述】：

我不知道为什么最简单的表格单元示例会惨遭失败（在 FF29 中）。请看http://jsfiddle.net/aYWG9/：

<body>
<table style="border-spacing:0">
  <tr>
    <td style="background:red;padding:0;margin:0;border:0">
        <img src="http://rufiojones.files.wordpress.com/2011/08/foghorn_leghorn.gif"/>
   </td>
  </tr>
</table>
</body

额外的 5px 是从哪里来的，我该如何去除红色空间？（别叫我改颜色！）

【问题讨论】：

不仅在 FF 中。我在 Chrome 中也看到了红色空间。不知道它是从哪里来的。
默认情况下，<img> 是一个内联元素，因此需要为字母的 descender 部分留出空间，如果这样做，img { display:block } 将修复问题，并使 img 表现得像块级元素。 developer.mozilla.org/en/docs/… 是一篇很老的文章，但对问题的解释更详细一些。
@NickR 这本来是一个不错的答案，但现在重点是安迪。
display: block 也是一种解决方案。有一点不同，在单元格中添加其他内容会导致它出现在图像下方。

标签： html css html-table cell

【解决方案1】：

默认情况下，图像表现为文本字符，底部有一个间隙以显示字母的悬垂部分（其下降部分）。

使用 vertical-align 属性去掉它：

img {
    vertical-align: middle;
}

【讨论】：

我也喜欢 display:block，很难选择...谢谢大家！

【解决方案2】：

使用这种风格：

img{display:inline-block;vertical-align:middle;}

【讨论】：

【解决方案3】：

http://jsfiddle.net/aYWG9/9/

<img style="display:block;margin:0;padding:0" src="http://rufiojones.files.wordpress.com/2011/08/foghorn_leghorn.gif" />

margin 和 padding 为 0 以删除 css 文件中的所有其他样式。但是您可以放入您的 css 文件中：

 td img{display:block;margin:0;padding:0;}

【讨论】：