padding - 如何处理行高在div底部添加填充

Question

我有一个网站，其中有 <div>展开以包含图像和标题。到目前为止，我所做的是创建这样的层次结构:

<div class="thumb">
    <img src="image_url"/>
    <div id="title">title</div>
</div>

然后这样定位标题:

#title{
    position: absolute;
    bottom: 0;
    left: 0;
}

但是标题<div>位于图像底线下方。我试图减少 line-height在 div 中，这解决了文本悬在图像上但弄乱了文本填充的问题。有谁知道我应该如何以不同的方式做事，以“正确”的方式将标题定位在图像的右下角？

这是问题的一个 jsfiddle:

http://jsfiddle.net/BUpmr/3

Answer 1

默认情况下图像是内联的，这意味着它们为字符下部留出空间。

http://jsfiddle.net/BUpmr/10/

img {display: block}