2つの画像要素間のスペース文字を削除する

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>

または類似。

他にできることは、 a の要素 left を float にすることですが、レイアウトに影響を与える可能性があります。

Answer 2

デフォルトでは、画像はインライン要素としてレンダリングされます。これは、コンテナ内の空白記号を無視しないことを意味します。このギャップを削除する場合は、 float：left または display：block ルールを使用して、空白自体を削除するか、画像をブロックレベルの要素にすることができます。次のように、これらの画像を表のセルでラップすることもできます。

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

しかし、これはsoooo 1999です。