html - 解决链接之间的差距问题，无需将代码放在一行中

Question

是否可以修复超链接图像之间出现的间隙，而无需将代码全部编写在一行中？

我希望能够这样写：

<a href="..." ><img src="..."/></a>

<a href="..." ><img src="..."/></a>

<a href="..." ><img src="..."/></a>

<a href="..." ><img src="..."/></a>

但我可以摆脱差距的唯一方法是这样写：

<a href="..." ><img src="..."/></a><a href="..." ><img src="..."/></a><a href="..." ><img src="..."/></a>

我的实际图片链接要长得多，这真的很难阅读。

Answer 1

因为锚点和图像默认是内联的，所以它们会受到代码中这些元素之间的空白（换行符）的影响。

如果 CSS 在这里真的不适合您，您可以将空格包装在 HTML 注释中，如下所示：

<a href="..." ><img src="..."/></a><!--

--><a href="..." ><img src="..."/></a><!--

--><a href="..." ><img src="..."/></a><!--

--><a href="..." ><img src="..."/></a>

它会影响可读性，但会阻止浏览器呈现空白，从而消除图像之间的间隙。

如果 CSS 是一个选项：

img {
  display: block;
  float: left;
}