Gaps Between Images

Question: I have two images that I want to display on my page with the second right up next to the first. It works with some browsers but with others there is always a gap between the images. How can I fix this?

Answer: You are probably aware that (with minor exceptions) HTML treats any amount of whitespace between two objects on your page as being equivalent and places the same amount of space between the items (ie, one space) regardless of how much whitespace that you put in your HTML source. Well the one area where the amount of whitespace does make a difference is where you don't want to have any space appear in the formatted results at all. To achieve that result you must make sure that there is no whitespace between the two items that you want to have immediately adjacent.

The problem occurs because it is not obvious whether there is whitespace between two items in the source or not. Whitespace is not just blanks and tabs. It also includes blank lines and even just starting a new line is treated by some browsers as whitespace.

The following definition od two images contains whitespace between the images:

<img src="image1.gif" />
<img src="image2.gif" />

Now some browsers may disregard the whitespace in this instance but others may not. To get the images to display immediately adjacent to each other in all browsers we must remove anything that any browser might interpret as whitespace between the images. The way that we do this is to only start a new line where we already have whitespace between the two items such as between two words in our text or between two parameters within an HTML tag instead of between HTML tags. For example we can recode the above image tags like this to force them to be adjacent in all browsers:

<img src="image1.gif"
/><img src="image2.gif" />

Now the end of the tag for the first image is immediately adjacent to the start of the tag for the second image with no intervening whitespace and there is nothing that can generate whitespace in the formatted result on any browser.

So to ensure that the whitespace in your HTML source is correctly interpreted in all browsers you should only start a new line where you need to have a space in the source ie. between words in text or between parameters within a tag. Coding your page this way will help to ensure that the whitespace on your page is interpreted the same way in all browsers.


This article written by Stephen Chapman, Felgall Pty Ltd.

go to top

FaceBook Follow
Twitter Follow