这个空白区来自哪里？ [英] Where is this blank space coming from?
问题描述
我有一个网页，其中包含表格单元格内的图片。但是，在表格单元格底部还有一个额外的5px。
I have a webpage that contains a picture inside a table cell. But, in the table cell there is also an additional 5px on the bottom.
我将代码简化为最大值：
I simplified the code to the 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中：
The result, in Firefox 25 and Internet Explorer 10:
你可以注意到那里是底部的空白。
As you can notice there is blank space in the bottom.
我知道这可能是由空格引起的，所以我在标签之间删除了所有这些空格。没有效果。
I know this could be caused by whitespaces, so I removed all of them between tags. No effect.
最奇怪的部分是，如果我删除 DOCTYPE 规范，或者用HTML或XHTML替换它过渡（严格不工作），它开始工作。
The weirdest part is, if I remove the DOCTYPE specification, or replace it with HTML or XHTML Transitional (Strict does not work), it starts to work.
这是一个奇怪的HTML / XHTML严格的怪癖还是什么？可以解决这个问题吗？
Is this a weird quirk of HTML/XHTML Strict or what? Can it be worked around and how?
推荐答案
说明：默认情况下，图像的底部与周围文本的基线对齐。您所看到的差距是围绕图像的任何下降字母（q，y，p，g）的下降部分。你没有周围文字的事实没有区别 - 空间仍然保留给它。
Explanation: By default, the bottom of an image lines up with the baseline of the surrounding text. The gap you're seeing is for the decenders of any descending letters (q, y, p, g) that surround the image. The fact that you have no surrounding text makes no difference - space is still reserved for it.
解决方案：你需要对齐底部线条底部的图像，而不是基线：
Solution: You need to align the bottom of the image with the bottom of the line, rather than the baseline:
img {
vertical-align: bottom;
}
这是工作小提琴。
这篇关于这个空白区来自哪里？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
