Unwanted space inside of DIVs - html

Question

I´m trying to place a slided image in the center if the page. I have it almost done, the thing is that inner each piece of the image I have a small space, like if it has some little padding (which it hasn't), does anybody sees something wrong in the code?
<style type="text/css">
html, body, #wrapper, images {
height: 100%;
width: 100%;
margin: 0px;
padding: 0px;
border: 0px;
background-color: #000;
}
img {
margin: 0px;
padding: 0px;
border: 0px;
}
.center {
width: 800px;
height: 600px;
position: absolute;
left: 50%;
top: 50%;
margin-left: -400px;
margin-top: -300px;
}
.center_mini {
margin: 0px;
padding: 0px;
border: 0px;
}
.center_mini_float {
float: left;
margin: 0px;
padding: 0px;
border: 0px;
}
</style>
<div class="center">
<div class="center_mini">
<img src="images/background_01.png" width="800" height="144" alt="bg">
<div class="center_mini">
<div class="center_mini_float">
<img src="images/background_02.png" width="503" height="456" alt="bg">
</div>
<div class="center_mini_float">
<div class="center_mini">
<div class="center_mini">
<img src="images/background_03.png" width="246" height="89" alt="bg">
</div>
<div class="center_mini">
<img src="images/background_05.png" width="246" height="106" alt="bg">
</div>
<div class="center_mini">
<img src="images/background_06.png" width="246" height="102" alt="bg">
</div>
<div class="center_mini">
<img src="images/background_07.png" width="246" height="159" alt="bg">
</div>
</div>
</div>
<div class="center_mini_float">
<img src="images/background_04.png" width="51" height="456" alt="bg">
</div>
</div>
</div>
<!--<img src="images/background.jpg" width="800" height="600" alt="bg">-->
</div>

Answer 1

Try adding:
img { display: block; }

Answer 2

The problem is that IMG tags have a natural DISPLAY value of "INLINE". This causes extra whitespace to appear around the image in certain situations.
Depending on your layout needs, try
img { display: block; }
or
img { display:inline-block; }
If your images are otherwise working the way you want, inline-block will cause the least amount of thrash.
More info:
http://www.w3schools.com/cssref/pr_class_display.asp
http://www.tequilafish.com/2009/04/29/css-removing-extra-space-underneath-an-image/

Answer 3

I think the better solution will be using
img { vertical-align: middle; }
This way you won't alternate the default browser image display. Also, make sure the image container has line-height: 100%, that could be causing problems too.

Answer 4

Images have display:inline; by default, that's what's causing the whitespace between your images. You can do three things to prevent this:
float:left;
or
display:inline-block;
or
display:block;