Why do small spaces keep showing up in my web pages?

Question

This might be a stupid question but if there's a better or proper way to do this, I'd love to learn it.

I have run across this a few times, including recently, where small spaces show up in the rendered version of my HTML page. Intuitively I think these should not be there because outside of text or entities the formatting of a page's HTML shouldn't matter but apparently it does.

What I'm referring to is this - I have some Photoshop file from the client on how they want their site to look. They want it to look basically pixel perfect to the image in this file.

One of the places in the page calls for a menu bar, where each one does the changing bit on hovering, acts like a hyperlink, etc. In the Photoshop file this is one long bar, so a cheap and easy way to do this is to just split that segment into multiple images and then place them next to each other in the file.

So instinctively I lay it out like so (there's more to it but this is the gist)

<a href="page1.html">
  <img src="image1.png" />
</a>
<a href="page2.html">
  <img src="image2.png" />
</a>
<a href="page3.html">
  <img src="image3.png" />
</a>

and so forth.

The problem is the images have this tiny space between them which is unacceptable since the client wants this thing pixel-perfect (and it just plain looks bad).

One way to get it to render properly is to remove the carriage returns between the images

<a href="page1.html">
  <img src="image1.png" />
</a>
<a href="page2.html">
  <img src="image2.png" />
</a>
<a href="page3.html">
  <img src="image3.png" />
</a>

Which makes the images go right up against each other (the desired effect) but it makes the line incredibly long and the code more difficult to maintain (it wraps here in SO and this is a simplified version - the real one has longer filenames and JavaScript sprinkled in to do the hovering).

It seems to me that this shouldn't happen but it looks like the carriage return in the HTML is being rendered as a small empty space. And this happens in all browsers, looks like.

Am I right or wrong for thinking the two snippets above should render the same? And is there something I'm doing wrong? Maybe saving the file with the wrong encoding? Should I make every one of these links a perfectly positioned CSS element instead?

Answer 1

The whitespace (carriage return included) is usually rendered as space in all browsers.

You need to put the elements one after another, but you can use a trick:

<a href="page1.html"><img src="image1.png" 
/></a><a href="page2.html"><img src="image2.png" 
/></a><a href="page3.html"><img src="image3.png" 
/></a>

This also looks a little ugly, but it's still better than one single line. You might change the formatting, but the idea is to add carriage returns inside the elements and not between them.