删除两个图像元素之间的空格字符答案

【问题标题】：Removing space character between two image elements删除两个图像元素之间的空格字符
【发布时间】：2009-09-16 14:19:22
【问题描述】：

一个页面上有2个小图片：

<a href="link.htm"><img src="image1.jpg" /></a>

<a href="link2.htm"><img src="image2.jpg" /></a>

当它们出现在页面上时，它们不会像我预期的那样直接相邻出现，它们之间会出现一个空格字符。

我有点理解为什么会出现这个空格（毕竟，标记中它们之间有空格），但我不希望有空格。

【问题讨论】：

【解决方案1】：

正如您所指出的，标记中它们之间存在空格，因此在呈现的文档中它们之间存在空格。

为了尽量减少对标记的更改，您可以这样做：

<a href="link.htm"><img src="image1.jpg" /></a><a
   href="link2.htm"><img src="image2.jpg" /></a>

或类似的。

您可以做的另一件事是float a 元素 left，但这可能会对您的布局产生连锁反应。

【讨论】：

【解决方案2】：

图像默认呈现为内联元素。这意味着它们不会忽略容器中的空白符号。如果您想消除这种差距，您可以使用float:left 或display:block 规则删除空白本身，或者使您的图像成为块级元素。您也可以尝试用表格单元格包装这些图像，如下所示：

<table cellspacing="0" cellpadding="0">
 <tr>
  <td><img ...></td>
  <td><img ...></td>
 </tr>
</table>

但这已经是 1999 年了。

【讨论】：