¿Cómo eliminar el relleno de imagen que se muestra involuntariamente?

Question

Tengo tres imágenes en un contenedor que deben apilarse sin interrupciones, pero hay algo de relleno entre ellas.

se puede ver la página aquí: http://www.arbitersoflight.net/media/

Los tres botones grandes en el contenedor de la izquierda son los que están en cuestión.

Aquí está el código para el contenedor:

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

El problema es que las imágenes son inline-bloques. Es decir, se cuentan los espacios entre ellos. Estos espacios ocurren como relleno para usted. Utilice

#mainBoxFull img { display: block; } 

y el problema desaparezca. De forma alternativa, puede eliminar el espacio en blanco en el código fuente HTML entre los elementos div y img (todos espacios en blanco).

Answer 2

Otra opción para resolver el mismo problema es

#mainBoxFull{ font-size:0; } 

la ignorará todos los espacios en blanco en el medio. + puedes ver el tamaño de la fuente donde sea que tengas el texto.