Image Layout in Browser

home ~ tools ~ song quotes ~ podcast ~ song lyric trivia ~ docs ~ links ~ archives ~ search ~ lycii ~ mail
internetbumperstickers.com
The following question was posted in a newsgroup

I've got a page which consists of a few identically sized images lined up along the top butting up side by side with each other. In the html document I have spotted that if, for the sake of readability and neatness, I do each img tag then do a CR at the end of each one the page displays in the browser with a small gap between each image. If I remove CR and just do the img tags all on the same line one after the other then I don't get the gap (which is what I want). Why is this and how do I get round this please? -- Ian

This is a standard question and a standard answer was given.

By getting used to coding them onto the same line.
If you have worked with table layouts, you must be familiar with this 
issue,

<td>
   <a ...>
      <img ...>
   </a>
</td>

This will create unwanted 'white-space' too. It is annoying yes, but get 
used to writing things like this onto one line.

<td><a ...><img ...></a></td>

I had often responded to that same question the same way. Then I read this:

I like this solution. It's close to the solution I stumbled across or 
read somewhere several years ago.

<img src="foo.png" width="160" height="120" alt=""
><img src="foo.png" width="160" height="120" alt=""
><img src="foo.png" width="160" height="120" alt="">

or

<img src="foo.png" width="160" height="120" alt=""><!--
--><img src="foo.png" width="160" height="120" alt=""><!--
--><img src="foo.png" width="160" height="120" alt="">
I will have to try this. Understanding how white space is skipped by an html parser, this is very interesting to me!