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

因为默认情况下 anchor 和图像是内联的，它们会受到代码中这些元素之间的空白(换行符)的影响。

如果 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;
}