html - 为什么少于 2 张图像的行之间没有间隙？

Question

所以我在 div 中有一堆图像，如果它们不适合窗口宽度，它们就会被包裹成几行。我不明白的部分是，为什么这些行之间有间隙 ONLY if there are more than 1 image in a row？

代码:

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

示例:http://jsbin.com/juterinu/3

我可以在 FF 和 Chrome 中看到这种效果。

Answer 1

发生这种情况是因为Quirks 模式 中图像的垂直对齐。

查看来自 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).

我想，当图像被换行并且每行只有一个图像时，它的行为就像图像是元素中唯一的内容。

这一个来自 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.

由于问题是为什么会发生这种情况，而不是如何解决它，而且其他答案中已经有一些解决方案，我不会添加如何解决它。