HTML 表格单元格中的附加空格
Posted
技术标签:
【中文标题】HTML 表格单元格中的附加空格【英文标题】：Additional whitespace in HTML table cell 【发布时间】：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 也是一种解决方案。有一点不同，在单元格中添加其他内容会导致它出现在图像下方。
【参考方案1】：
默认情况下，图像表现为文本字符，底部有一个间隙以显示字母的悬垂部分（其下降部分）。
使用 vertical-align 属性去掉它：
img
vertical-align: middle;
【讨论】：
我也喜欢 display:block，很难选择...谢谢大家！【参考方案2】：使用这种风格：
imgdisplay: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 imgdisplay:block;margin:0;padding:0;
【讨论】：
以上是关于HTML 表格单元格中的附加空格的主要内容，如果未能解决你的问题，请参考以下文章