How to remove image padding that is showing up unintentionally?

Question

I have three images in a container that should be stacked seamlessly, but there is some padding occurring between them.

You can see the page here: http://www.arbitersoflight.net/media/

The three large buttons in the container on the left are the ones in question.

Here's the code for the container:

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

The problem is, that images are inline-blocks. That is, spaces between them are counted. These spaces occur as padding to you. Use

#mainBoxFull img { display: block; }

and the problem should vanish. Alternatively, you can remove the white space in the source HTML between the div and the img elements (all white space).

Answer 2

Another option to resolve the same problem is

#mainBoxFull{ font-size:0; }

it'll ignore all the white spaces in between. + you can se font size where ever you have the text.