Mysterious gap under the image

Possible duplicate:
White space at the bottom of the anchor tag

Check out this page here. http://denise.brixwork.com/

For some odd reason, under this page of this family there is a space in front of the gray frame (5px # 333) of the div containing the image. I deleted all the fields, paddings, etc., and it still will not disappear. :(

It’s not enough to set a fixed height in the #index_content div, which I don’t want if the image needs to be resized later (which means doubling the work for me), how can I remove this gap while leaving it elastic?

My HTML is:

<div id="index_content_container">
    <div id="index_content">
        <img src="http://denise.brixwork.com/images/index_photo.jpg" alt="Real Whistler Living - Real Estate for the Next Generation" />
    </div>
    <div class="clear"></div>
</div>

CSS:

/* INDEX PAGE SPECIAL CSS */
#index_content_container {
    position: relative;
    width: 970px;
    border: 5px solid #e1bb14;
    left: -20px;
    display: block;
    float: left;
    padding: 0px;
    margin: 0px;
}

#index_content {
    position: relative;
    width: 960px;
    border: 5px solid #333;
    float: left;
    display: block;
    padding: 0px;
    margin: 0px;
}

#index_content img {
    padding: 0px;
    border: none;
    margin: 0px;
    clear: none;
}