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:block或display:inline-block来解决这个问题。
它解决了我的问题。
line-height: 0;
我相信设置
line-height: 1;
在图像上也将解决这个问题，特别是如果它在一个块本身。
我不知道为什么发生的确切解释，但给你的占位符的字体大小：0px;
.placeholder { font-size: 0px; }
不知道什么是确切的问题，但我已经尝试这与2个不同的选项首先应用类上的img标签这将工作，第二个应用字体大小0像素;
它也发生在堆积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;
在固定它的包装容器上。
