CSS字体大小＆amp; <img/>标记

Question

影响＆lt; img ...＆gt;的font-size（line-height）问题元素

（至少在webkit / safari中）似乎根据影响父容器的font-size / line-height在元素下应用了额外的空间。

在此示例中，外部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>。这将删除图像下方的空间。