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>

或类似。

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

Answer 2

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

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

但这是1999年的事情。