当我将我的网站更改为
<!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
这个问题是由于图像表现得像文本字符（因此在“y”或“g”的悬挂部分下方留下一个空间），并通过使用vertical-align CSS属性来表示不需要这样的空间。几乎任何vertical-align的价值都可以;我个人非常喜欢middle。
img {
vertical-align: middle;
}
的jsfiddle：http://jsfiddle.net/fRpK6/1/
也许是造成这种情况的白色空间问题。所以，这些方法可能有用
img {
display: block;
} 要么
img {
vertical-align: top/middle/...;
}
要么
.placeholder {
font-size: 0;
}
在我的特殊情况下，上述解决方案均无效。
我用div包装了display: flex;。
我设法使这个工作通过添加：align-items: flex-start;到包装div和所有图像：display: block;。
在我明确告诉内容对齐它之前搞砸了布局。将它设置为flex-start后，一切都像魅力一样。
我经常通过适当地给出图像元素display:block或display:inline-block来解决这个问题。
它解决了我的问题。
line-height: 0;
我相信设定
line-height: 1;
在图像上也将解决这个问题，特别是如果它本身在一个块中。
我不确定它为什么会发生的确切解释，但给你的占位符div font-size：0px;
.placeholder {
font-size: 0px;
}
将display: block应用于图像修复它，我有浮动div中的图像问题。
对我来说，这是一个组合
font-size: 0px;
line-height: 0;
在固定它的包装容器上。
不知道确切的问题是什么，但我尝试了2个不同的选项首先在img标签上应用这将工作，第二个应用字体大小0 px;
它也发生在堆积的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;
}