Why there is no gap between rows of less than 2 images?

Question

So I have a bunch of images inside the div and, if they do not fit into window width, they are wrapped into several rows. The part I do not understand is, why there is a gap between these rows ONLY if there are more than 1 image in a row?

Code:

<style>
img {
    width: 350px;
}
</style>
...
<div>
    <img src="http://carpaper.net/wp-content/uploads/2013/12/-image.jpg" />
    <img src="http://carpaper.net/wp-content/uploads/2013/12/-image.jpg" />
    <img src="http://carpaper.net/wp-content/uploads/2013/12/-image.jpg" />
    <img src="http://carpaper.net/wp-content/uploads/2013/12/-image.jpg" />
    <img src="http://carpaper.net/wp-content/uploads/2013/12/-image.jpg" />
    <img src="http://carpaper.net/wp-content/uploads/2013/12/-image.jpg" />
</div>

Example: http://jsbin.com/juterinu/3

I can see this effect in both FF and Chrome.

Answer 1

It's happening because of vertical-alignment of an image in Quirks mode.

Check out these excerpts from this page:

Vertical alignment of an image is under certain conditions to the bottom of the enclosing box, not to the baseline of text. This happens when the image is the only content within an element, typically a table cell. This means that e.g. an image in a table cell is by default at the bottom of the cell in Quirks Mode (which is often what the author wants), whereas in Standards Mode there is a few pixels spacing below the image (unless one sets e.g. vertical-align: bottom for the img element).

I guess, when the images are wrapped and there's only one image per line, it behaves like the image is the only content within an element.

And this one from Wikipedia:

Another notable difference is the vertical alignment of certain types of inline content; many older browsers aligned images to the bottom border of their containing box, although the CSS specification requires that they be aligned to the baseline of the text within the box. In standards mode, Gecko-based browsers will align to the baseline, and in quirks mode they will align to the bottom.

Since the question is why this is happening, not how to solve it and there's already a few solutions in other answers, I won't add how to solve it.