html - コードを 1 行にまとめることなく、リンク間のギャップの問題を解決する

Question

コードをすべて 1 行に記述せずに、ハイパーリンクされた画像間に表示されるギャップを修正することは可能ですか?

次のように書けるようになりたいです。

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