问题
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>
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.
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.
Is this a weird quirk of HTML/XHTML Strict or what? Can it be worked around and how?
回答1:
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;
}
Here's a working fiddle.
回答2:
set your img to
display:block;
that should solve it
回答3:
Put the closing cell tag immediately after the image, like:
<img style="border: 1px solid red" src="picture.png" /></td>
来源：https://stackoverflow.com/questions/23010299/where-is-this-blank-space-coming-from