HTML 5奇怪的img总是在底部添加3px的边距

Question

当我将我的网站更改为

<!DOCTYPE HTML>

包含在DIV中的每个img元素都具有3px的底部边距,即使该边距未在CSS中定义.换句话说,没有导致3px底部边距的样式属性.

<div class="placeholder">
    <img alt="" src="/haha.jpg" />
</div>

现在让我们说haha.jpg是50x50,并且.placeholder设置为display:table.奇怪的是,我观察的.placeholder的高度尺寸是50x53 ......

有没有人遇到过这种异常并修复过它？

编辑

这是JS FIDDLE

Answer 1

这个问题是由于图像表现得像文本字符(因此在"y"或"g"的悬挂部分下面留下一个空间),并通过使用vertical-alignCSS属性来表示没有需要这样的空间.几乎任何价值vertical-align都会做; 亲爱的middle,我很喜欢.

img {
    vertical-align: middle;
}

问题是由`vertical-align:baseline`引起的,这是大多数元素的默认值,表示应该保留该空格.`vertical-align`的其他一些合法值也保留了这个空间,但`top`,`text-top`,`middle`,`bottom`和`text-bottom`都没有.`sub`似乎也没有,但我对相信那一个很谨慎. (15认同)
如果图像小于您的字体大小,那么这将不起作用,因为即使不保留"特殊"空间,div仍将为文本保留足够的空间.在这种情况下,你将不得不使用pantryfight的建议或`display:block`来完全删除图片中的文本. (4认同)
也适用于 iframe（例如，用于嵌入的 YouTube 视频或谷歌地图） (2认同)

Answer 2

我经常通过给出图像元素display:block或display:inline-block适当来解决这个问题.

Answer 3

它解决了我的问题.

line-height: 0;