html - 删除两个图像元素之间的空格字符

Question

页面上有 2 个小图像：

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

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

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

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

Answer 1

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

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

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

或类似的。

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

Answer 2

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

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

但这已经是 1999 年了。