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

当我改变我的网站

<!DOCTYPE HTML> 

每个封装在DIV中的img元素都有一个3px的底部边距,即使这个边距在CSS中没有定义。 换句话说,没有导致3px底部边距的样式属性。

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

现在我们假设haha.jpg是50×50,并且.placeholder被设置为显示:table。 奇怪的是我的观察.placeholder的高度尺寸是50×53 …

有没有人遇到过这个exception,并修复它?

编辑

这是JS FIDDLE

http://jsfiddle.net/fRpK6/

这个问题是由于图像的行为像文本的字符(所以留下一个空格,在“y”或“g”挂起的部分将会去的地方),并通过使用vertical-align CSS属性来解决表明不需要这样的空间。 几乎任何vertical-align值都可以; 我个人喜欢middle

 img { vertical-align: middle; } 

jsFiddle: http : //jsfiddle.net/fRpK6/1/

我经常通过给图像元素display:blockdisplay:inline-block来解决这个问题。

它解决了我的问题。

 line-height: 0; 

我相信设置

 line-height: 1; 

在图像上也将解决这个问题,特别是如果它在一个块本身。

我不知道为什么发生的确切解释,但给你的占位符的字体大小:0px;

 .placeholder { font-size: 0px; } 

不知道什么是确切的问题,但我已经尝试这与2个不同的选项首先应用类上的img标签这将工作,第二个应用字体大小0像素;

http://jsfiddle.net/fRpK6/3/

它也发生在堆积divs ,只是添加float属性。 例:

 <body> <div class="piledUpDiv">Some text</div> <div class="piledUpDiv">Some text</div> <div class="piledUpDiv">Some text</div> </body> 

有问题的CSS:

 .piledUpDiv{ width:100%; display:inline-block; } 

解:

 .piledUpDiv{ width:100%; display:inline-block; float:left; } 

应用display: block图像修复它,我有这个问题与浮动div内的图像。

也许这是导致这个问题的白色空间的问题。 所以,下面的方法可能是有用的

 img { display: block; 

} 要么

 img { vertical-align: top/middle/...; 

}

要么

 .placeholder { font-size: 0; 

}

对我来说,这是一个组合

 font-size: 0px; line-height: 0; 

在固定它的包装容器上。