How to remove image padding that is showing up unintentionally?

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:

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

Here's the code for the container:


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


<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" />


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).

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.

Need Your Help

How do I draw an image to a JPanel or JFrame?

java swing jframe jpanel bufferedimage

How do I draw an Image to a JPanel or JFrame, I have already read oracle's tutorial on this but I can't seem to get it right. I need the image "BeachRoad.png" to be displayed on a specific set of

Convert duration to hours:minutes:seconds (or similar) in Rails 3 or Ruby

ruby-on-rails ruby datetime ruby-on-rails-3

I have a feeling there is a simple/built-in way to do this but I can't find it.