Question

我无法找出为什么最简单的表格单元示例失败（在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来自哪里，如何删除红色空间？（不要告诉我改变颜色！）

Answer 1

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

使用vertical-align属性去除它：

img {
    vertical-align: middle;
}

Answer 2

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

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

边距和填充为0以删除css文件中的所有其他样式。但你可以在你的css文件中加入：

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

Answer 3

使用此风格：

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

HTML表格单元格中的其他空格

3 个答案: