CSS: How do I get rid of some inexplicable space/padding?

Question

In this example:

http://jsfiddle.net/trusktr/g5sa5/

you see a white spacing between each row of images. How in the world do you get rid of it

Answer 1

There are at least two solutions for this. Just add one of the following lines to your .box_thumb_img-style:

vertical-align: bottom;

or

display: block;

Explanation: By default, browsers treat images as inline-elements. It puts the image at the same height as the baseline (see image below) of your the text (yes, on your page there is no text, but there could be some). The space below the images is the space a text would use under its baseline to display characters like g p or q.

To get rid of this, just set the vertical align to the bottom of the text (my fist solution), or don't let the images be inline-elements (my second solution).