可以将文章内容翻译成中文,广告屏蔽插件可能会导致该功能失效(如失效，请关闭广告屏蔽插件后再试):

问题:

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>

Where is this blank space coming from?

问题:

回答1:

回答2:

回答3:

收藏的人(0)

Where is this blank space coming from?

问题:

回答1:

回答2:

回答3:

收藏的人(0)

举报内容

检举类型

检举原因

检举说明(必填)

打开微信“扫一扫”，打开网页后点击屏幕右上角分享按钮