Removing space character between two image elements

Question

There are 2 small images on a page:

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

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

When they appear on the page, they do not appear directly next to each other like I would expect, they appear with a space character between them.

I sort of understand why this space is appearing (there is, afterall, space between them in the mark-up), but I don't want space to be there.

Answer 1

As you point out, there's whitespace between them in the markup, so there's whitespace between them in the rendered document.

To keep the changes to your markup to a minimum, you could do this:

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

or similar.

The other thing you could do is float the a elements left, but that's likely to have knock-on effects on your layout.

Answer 2

Images by default render as inline elements. This means that they do not ignore whitespace symbols in their container. If you want to remove this gap, you can either remove the whitespace itself, or make your images block-level elements, by using float:left or display:block rules. You can also try wrapping these images with table cells, like this:

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

but this is soooo 1999.