空间标签之间<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

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

出于同样的原因，有在该段落中的字母A和B之间的空间：

<p>a 
b</p> 

在HTML的任何种空间被视为空间（和折叠成一个单一的空间）。

Answer 3

这是因为空白对于内联元素很重要。如果你想让它们排列起来，你总是可以浮动图像。

编辑：按照要求，这里是一个简单的例子：http://jsfiddle.net/6ZF9v/

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（浏览器技术上使用display: inline，但它们对图像如inline-block元素给予特殊处理）会很好。

因此，如果你添加一个空白样

• 空间
• 标签
• newine

位于它们之间的差距将会出现。

根据不同的情况，可以使用以下两种方法来摆脱的差距：

• 添加负margin-left
• 使用float

• 取出之间的空白元素，可以做到：

  1-把主题放在一行

  <img src="..."><img src="..."> 
  

  2-卸下空间

  <img src="...">< 
  img src="..."> 
  

  3-使用HTML注释

  <img src="..."><!-- 
  --><img src="..."> 
  

  4-跳至结束标记（在情况下，存在这就像li）。 （仅HTML5）

  <ul> 
      <li>First 
      <li>Second 
  </ul> 
  

  5- font-size: 0父元素