我有一个网页，其中表格单元格内包含图片。但是，在表格单元格的底部还有一个额外的 5px。
我最大限度地简化了代码:
<!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 中:
正如您所注意到的，底部有空白区域。
我知道这可能是由空格引起的，所以我删除了标签之间的所有空格。没有效果。
最奇怪的部分是，如果我删除 DOCTYPE 规范，或将其替换为 HTML 或 XHTML Transitional(严格不工作)，它就会开始工作。
这是 HTML/XHTML Strict 的怪癖还是什么？它可以解决吗？如何解决？
最佳答案
说明:默认情况下，图像的底部与周围文本的基线对齐。您看到的间隙是图像周围任何降序字母(q、y、p、g)的降序部分。事实上，周围没有文本并没有什么区别 - 仍然为其保留空间。
解决方案:您需要将图像的底部与线条的底部对齐，而不是与基线对齐:
img {
vertical-align: bottom;
}
这是一个working fiddle .
关于html - 这个空白是从哪里来的呢？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/23010299/