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.