Why are spaces appearing in-between my images?

I was working on a web design the other day and couldn't work out why 3 images that were supposed to be flush with each other had spaces in-between them. I didn't have any spaces between them and the padding and margins were zero. Was it my CSS code? Was it my HTML?

The Answer

HTML sucks.. :) Well, HTML itself is probably good in theory, but both IE and Firefox experienced this problem. It turns out that the problem is caused by starting each img tag on a new line. The solution is to simply run the img tags into one another with no spaces and no new lines / line feeds / carriage returns.

IMG tags on new lines

Example:

<img src="images/define.gif" alt="1st image" />
<img src="images/define.gif" alt="2nd image" />
<img src="images/define.gif" alt="3rd image" />

The result is a gap in between images:

IMG tags with no spaces and no line feeds / carriage returns in-between

Example:

<img src="images/define.gif" alt="1st image" /><img src="images/define.gif" alt="2nd image" /><img src="images/define.gif" alt="3rd image" />

This results in what we want:

- Scott

Goo Theory - Web Marketing and Development :: Web Development and Web Hosting