Come rimuovere il riempimento dell'immagine che viene visualizzato involontariamente?

Question

Ho tre immagini in un contenitore che devono essere impilate senza soluzione di continuità, ma tra di esse si verifica un riempimento.

potete vedere nella pagina qui: http://www.arbitersoflight.net/media/

I tre pulsanti di grandi dimensioni nel contenitore di sinistra sono quelli in questione.

Ecco il codice per il contenitore:

CSS

#mainBoxFull { 
    background-image: url(/img/cont/mainfull.jpg); 
    float: left; 
    height: 560px; 
    width: 560px; 
    margin: 0px; 
    padding: 20px; 
} 

HTML

<div id="mainBoxFull"> 
    <img src="/img/btns/media/bgal.jpg" alt="screenshot" width="560" height="180" border="0" /> 
    <img src="/img/btns/media/bvid.jpg" alt="videos" width="560" height="200" border="0" /> 
    <img src="/img/btns/media/bsoon.jpg" alt="coming soon" width="560" height="180" border="0" /> 
</div> 

Answer 1

Il problema è che le immagini sono in linea blocchi. Cioè, gli spazi tra di loro sono contati. Questi spazi si verificano come riempimento per voi. Utilizzare

#mainBoxFull img { display: block; } 

e il problema dovrebbe sparire. In alternativa, è possibile rimuovere lo spazio bianco nel codice HTML sorgente tra il div e gli elementi img (tutti gli spazi bianchi).

Answer 2

Un'altra opzione per risolvere lo stesso problema è

#mainBoxFull{ font-size:0; } 

la ignorerà tutti gli spazi bianchi in mezzo. + puoi mettere la dimensione del carattere dove mai hai il testo.