<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

这是因为空白区域对于内联元素非常重要.如果您想让它们对齐,您可以随时浮动图像.

编辑:根据要求,这是一个简单的例子:

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

Answer 2

<img src="http://www.nataliedee.com/111908/whatever-dude-whatever.jpg" style="border:0px;margin:0px;float:left;width:200px;" />
<img src="http://www.nataliedee.com/111908/whatever-dude-whatever.jpg" style="border:0px;margin:0px;clear:both;width:200px;" />

http://jsfiddle.net/JNWc7/

Answer 3

出于同样的原因,本段中字母a和b之间有一个空格:

<p>a
b</p>

HTML中的任何类型的空间都被视为空格(并折叠为单个空格).

Answer 4

这样做的原因是因为 HTML 将换行符视为空白，并打印空白。