标签之间的空间

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

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

编辑：根据要求，这是一个简单的例子：

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

如果该div中没有​​任何带图像的文本，则font-size：0;还解决了这个问题

Answer 7

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

<img>元素像文本一样流入内联，但也有像块元素一样的宽度和高度。在CSS中，您可以将元素设置为display: inline-block以使其复制图像的行为，因此将<img>s视为inline-blocks（浏览器在技术上使用display: inline但它们对inline-block元素等图像进行特殊处理）会更好。

所以如果你添加一个白色空间

• 空间
• 标签
• 纽厄尔

他们之间会出现差距。

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

• 添加负margin-left
• 使用浮动
• 删除元素之间的空格，可以这样做： 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