Question

我有一个网页，其中包含表格单元格中的图片。但是，在表格单元格底部还有一个额外的5px。

我将代码简化为max：

<!DOCTYPE html>
<html>
<head>
<title>Random page</title>
</head>
<body>
<table>
<tr>
<td style="border: 1px solid black">
<img style="border: 1px solid red" src="picture.png" />
</td>
</tr>
</table>
</body>
</html>

结果，在Firefox 25和Internet Explorer 10中：

Result

您可以注意到底部有空白区域。

我知道这可能是由空格引起的，所以我在标签之间删除了所有这些空格。没效果。

最奇怪的部分是，如果我删除DOCTYPE规范，或者将其替换为HTML或XHTML Transitional（Strict 不工作），它就会开始工作。

这是一个奇怪的HTML / XHTML严格的怪癖还是什么？可以解决这个问题吗？

Answer 1

将你的img设置为

display:block;

应该解决它

Answer 2

说明：默认情况下，图像底部与周围文字的基线对齐。您所看到的差距是围绕图像的任何下降字母（q，y，p，g）的下降部分。你没有周围文字这一事实没有任何区别 - 空间仍然为它保留。

解决方案：您需要将图像的底部与线条的底部对齐，而不是基线：

img {
    vertical-align: bottom;
}

这里是working fiddle。

Answer 3

将关闭的单元格标记放在图像后面，例如：

<img style="border: 1px solid red" src="picture.png" /></td>

这个空白区来自哪里？

3 个答案: