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将新行字符视为空格，并打印空格。

Answer 5

这是因为换行符呈现为空格。

为避免这种情况，请确保标记之间没有空格。这就是我通常做的事情：

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

当然，这很难看。但这是处理它的最佳方式。

关于其他答案的注意事项：浮点数具有您可能不想要的各种不同效果（最重要的是，它们会漂浮在您的其他内容旁边）。如果您只想要内嵌图像，这是您的解决方案。

Answer 6

如果你的图像中没有任何文字，font-size：0;还解决了这个问题

Answer 7

这个问题有很多好的答案，但我认为这有可能对将来会遇到这个问题的人有用。

<img>元素像文本一样内联流动，但也像块元素一样具有宽度和高度。在CSS中，您可以将元素设置为display: inline-block以使其复制图像的行为，因此将<img> s视为inline-block s（浏览器技术上使用{{}会很好但是他们对像display: inline元素这样的图像给予特殊处理。

所以如果你添加像

这样的空白区域

空间
标签
newine

他们之间会出现差距。

根据具体情况，您可以使用以下任一方法消除差距：

添加否定inline-block
使用float
删除元素之间的空格，可以这样做：

1-将主题放在一行
```
margin-left
```
2-删除空间
```
<img src="..."><img src="...">
```
3-使用HTML评论
```
<img src="..."><
img src="...">
```
4-跳过结束标记（如果它像<img src="..."><img src="...">那样）。（仅限HTML5）
```
li
```
父元素上的
5- <ul> <li>First <li>Second </ul>

<img/>个代码之间的空格

7 个答案: