DIV height based on child image height adds few extra pixels at the bottom

Question

Why does the parent div of the image have a few extra pixels at the bottom. How can I remove the pixels without hard code the parent div height.

http://jsfiddle.net/6x8Dm/

HTML

<div class="wrapper">
    <div class="column">
        <img src="http://www.lorempixel.com/200/200/" />
    </div>    
</div>  

CSS

.wrapper {
    width:200px;
    margin:0 auto;
}
.column {
    width:100%;
    background:#cc0000;
}

img {
    width:100%;
}

Answer 1

That space actually is a result of descender elements in fonts. You can get rid of it in a number of ways:

• add a vertical-align:top rule to the image jsFiddle example
• add font-size:0; to the containing div jsFiddle example
• add display:block; to the image jsFiddle example

Answer 2

One way is by setting display:block on the img , causing it to fill the parent.

jsFiddle here - it works.

img {
    width:100%;
    display:block;
}

Alternatively, if you don't like that approach, you can also change the vertical alignment, as the default is baseline .