Rimozione del carattere spaziale tra due elementi dell'immagine

Question

Ci sono 2 piccole immagini in una pagina:

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

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

Quando appaiono sulla pagina, non appaiono uno accanto all'altro come mi aspetterei, appaiono con uno spazio tra di loro.

In qualche modo capisco perché questo spazio appare (dopotutto, c'è spazio tra loro nel mark-up), ma non voglio che lo spazio sia lì.

Answer 1

Come fai notare, c'è spazio tra loro nel markup, quindi c'è spazio tra loro nel documento renderizzato.

Per ridurre al minimo le modifiche al markup, puoi farlo:

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

o simile.

L'altra cosa che potresti fare è float gli elementi a left , ma è probabile che abbiano effetti a catena sul tuo layout.

Answer 2

Le immagini per impostazione predefinita vengono visualizzate come elementi incorporati. Ciò significa che non ignorano i simboli degli spazi bianchi nel loro contenitore. Se vuoi rimuovere questo gap, puoi rimuovere lo spazio bianco stesso, o rendere le tue immagini elementi a livello di blocco, usando le regole float: left o display: block . Puoi anche provare a avvolgere queste immagini con celle di tabella, in questo modo:

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

ma questo è veramente il 1999.