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.
Solution
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.
OTHER TIPS
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.