L'altezza DIV in base all'altezza dell'immagine secondaria aggiunge pochi pixel in più nella parte inferiore

Question

Perché il div genitore dell'immagine ha alcuni pixel in più nella parte inferiore. Come posso rimuovere i pixel senza hardcode l'altezza div padre.

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

Lo spazio in realtà è il risultato di elementi di discender nei caratteri. È possibile liberarsi di esso in vari modi:

• aggiungere una regola vertical-align:top all'immagine jsFiddle example
• aggiungere font-size:0; al div contenente jsFiddle example
• aggiungere display:block; all'immagine jsFiddle example

Answer 2

Un modo è impostando display:block sul img, inducendolo a riempire il genitore.

jsFiddle here - funziona.

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

In alternativa, se non ti piace questo approccio, è possibile anche modificare l'allineamento verticale, come il valore predefinito è baseline.