CSS font-size & <img> tag

Question

字体大小（行高）影响<img>元件

（至少在webkit/safari中）似乎根据影响父容器的字体大小/行高在元素下应用了额外的空间。

在本例中，外部div大于图像（在图像下方添加了空间）：

<div class="outer">
    <img src="http://placehold.it/300x100" width="300" height="100">
</div>

但是在这个例子中没有添加空格：

<div class="outer">
    <div style="width:300px; height:100px">
</div>

外部div上的字体大小（行高）越大，添加的空间就越大。因此，下面的CSS将解决这个问题（但实际上并不是一个有用的解决方案）：

.outer{
    line-height: 0;
}

请在此处查看问题的完整演示：http://jsfiddle.net/mikkelbreum/wtKS2/

我确信这是一个已知的"问题"，但我在谷歌上找不到解决这个问题的好方法。。

我想听听其他人的意见，如果这是一个众所周知的问题（为什么一个图像会被视为一个文本块，因为它下面添加了行高。）有一种商定的方法来处理这个问题吗？

Answer 1

解决此问题的方法是将CSS属性vertical-align:middle;或vertical-align:text-bottom;添加到<img>中。这将删除图像下方的空间。