CSS 字体大小和 <img> 标签答案

【问题标题】：CSS font-size & <img> tagCSS 字体大小和 <img> 标签
【发布时间】：2011-06-26 20:53:02
【问题描述】：

影响元素的字体大小（行高）问题

（至少在 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 上的 font-size(line-height) 越大，添加的空间越大。所以下面的 CSS 将解决这个问题（但实际上并不是一个有用的修复）：

.outer{
    line-height: 0;
}

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

我确定这是一个已知的“问题”，但我无法通过谷歌搜索找到解决该问题的好方法..

我想听听其他人的意见，如果这是一个众所周知的问题（为什么将图像视为文本块，并在其下方添加行高。）是否有商定的处理方式这个问题？

【问题讨论】：

【解决方案1】：

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

【讨论】：