{var%20f='http://v.t.sina.com.cn/share/share.php?appkey=1515056452',u=z||d.location,p=['&url=',e(u),'&title=',e(t||d.title),'&source=',e(r),'&sourceUrl=',e(l),'&content=',c||'gb2312','&pic=',e(p||'')].join('');function%20a(){if(!window.open([f,p].join(''),'mb',['toolbar=0,status=0,resizable=1,width=440,height=430,left=',(s.width-440)/2,',top=',(s.height-430)/2].join('')))u.href=[f,p].join('');};if(/Firefox/.test(navigator.userAgent))setTimeout(a,0);else%20a();})(screen,document,encodeURIComponent,'','','https://www.manongdao.com/data/attach/logo/logo.png', '推荐 女痞 的问题《Where is this blank space coming from?》','https://www.manongdao.com/q-885762.html','页面编码gb2312|utf-8默认gb2312'));){kind=link}
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?
set your img to
that should solve it
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:
Here's a working fiddle.
Put the closing cell tag immediately after the image, like: