How to deal with line height adding padding at bottom of divs

Question

I have a site where I have <div>s that expand to contain images and a title. What I have done so far is create a hierarchy like this:

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

then positioned the title like this:

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

but the title <div> sits below the bottom line of the image. I tried to reduce the line-height in the div and that fixed the problem of the text hanging over the image but messed up the text padding. Does anybody know how I should be doing things differently to position the title at the bottom right of the image in the 'correct' way?

Here's a jsfiddle of the problem:

http://jsfiddle.net/BUpmr/3

Answer 1

Images are inline by default, and that means they allow space for character descenders.

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

img {display: block}