html - <img> 标签之间的空间

Question

如果我使用这段代码(两个标签之间有空格):

<img src="....." style="border:0px;margin:0px" />
<img src="....." style="border:0px;margin:0px" />

图像之间有 4 个像素。如果我使用这个:

<img src="....." style="border:0px;margin:0px" /><img src="...." style="border:0px;margin:0px" />

图像之间的空间在所有浏览器上都消失了!

为什么？？？？？？

Answer 1

那是因为空白对于行内元素很重要。如果您想让图像对齐，您可以随时 float 它们。

编辑:根据要求，这里有一个简单的例子:

/* This is used to "clear" the floated elements */
.images { overflow: hidden; width: 100% }

/* float the elements so that white space does not matter */
.images img { float: left; }

<div class="images">
    <img src="http://dummyimage.com/150x100/000/fff&text=first+image" alt="first image" />
    <img src="http://dummyimage.com/150x100/6aa8de/fff&text=second+image" alt="second image" />
    <img src="http://dummyimage.com/150x100/ff6500/fff&text=third+image" alt="third image" />
</div>