Dov'è lo spazio extra proveniente da queste immagini?

Question

Ho un problema che ho replicato in vari browser.

Ho div con immagini ciascuna in un wrapper http://jsfiddle.net/QnVYL/. Il wrapper ha un bordo 1px e un padding 5px. L'immagine all'interno è dimensionata al 100% della larghezza.

Per qualche motivo, tuttavia, c'è più di 5px tra il fondo dell'immagine e il fondo del suo involucro. Vedi come sembra che il padding sia uguale su tutti i lati delle immagini? Sembra che ci siano 3 pixel aggiunti da ... da qualche parte. Firebug non mi fa sapere da dove viene.

Come posso liberarmi dello spazio? Non posso usare il posizionamento assoluto per simulare l'imbottitura perché non sono ancora sicuro di conoscere sempre l'altezza esatta dell'immagine.

L'aiuto è molto apprezzato!

Answer 1

Si tratta di un problema noto. Prova:

img { 
    display: block; 
}  

Answer 2

No spaziatura extra se si aggiunge img {display:block}

http://jsfiddle.net/lexy0202/uxMu9/2

Answer 3

Come ho indovinato è l'attribut visualizzazione:

#container { 
    display:block; 
    width: 50%; 
    margin: auto; 
    margin-top: 100px; 
} 

Answer 4

È un'altezza di linea. Le immagini vengono visualizzate come elementi di blocco in linea per impostazione predefinita. La line-height fa in modo che dopo il testo non si attacchi all'immagine come qui:

<img...><br>foo 

Entrambe queste correzioni sono utili, a seconda della situazione:

.imgContainer { line-height: 0; } 

img { display: block; }