Removendo caractere de espaço entre dois elementos de imagem

Question

Existem 2 pequenas imagens em uma página:

<a href="link.htm"><img src="image1.jpg" /></a>

<a href="link2.htm"><img src="image2.jpg" /></a>

Quando eles aparecem na página, eles não aparecem diretamente ao lado do outro, como seria de esperar, eles aparecem com um caractere de espaço entre eles.

Eu meio que entender por que este espaço está aparecendo (não é, afinal, o espaço entre eles no mark-up), mas eu não quero espaço para estar lá.

Answer 1

Como salienta, não há espaços em branco entre eles na marcação, então não há espaço em branco entre eles no documento renderizado.

Para manter as alterações para a sua marcação a um mínimo, você poderia fazer isso:

<a href="link.htm"><img src="image1.jpg" /></a><a
   href="link2.htm"><img src="image2.jpg" /></a>

ou similar.

A outra coisa que você poderia fazer é float a elementos a left, mas é provável que tenha efeitos em cadeia sobre o seu layout.

Answer 2

Imagens por padrão processar como elementos inline. Isso significa que eles não ignoram símbolos de espaço em branco em seu recipiente. Se você deseja remover essa lacuna, você pode remover o próprio espaço em branco, ou fazer seus elementos nível de bloco imagens, usando as regras float:left ou display:block. Você também pode tentar envolver estas imagens com as células da tabela, assim:

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

mas isso é soooo 1999.