Images: Single Pixel GIF

This trick comes from David Siegel's book Creating Killer Web Sites. The idea is that you can use the single pixel transparent GIF (which is invisible against any background) to create space in HTML pages (see the HTML page for information on spacing text). You can use the GIF to create an indent at the beginning of paragraphs, or to position other images on the page without resorting to ALIGN=CENTER or ALIGN=RIGHT.

We'll start by indenting the first line of the paragraphs on this page. Open the HTML for this page in Notepad. I've stored the single pixel transparent GIF over in the images directory, so the code we'll add to specific points on the HTML page is

<img src="../images/dot_clear.gif" ALT="" HSPACE=8>

After specifying the location of the image, this command tells the browser not to provide a text description if the mouse should happen to pause where the GIF sits on the page (that's the ALT="" part). The HSPACE=8 command tells the browser to put 8 blank pixels to the left and the right of the invisible single pixel, for a total of 17 pixels of space (about the right amount for an indent).

You can increase or decrease the HSPACE (short for horizontal space) as you need, and it's good to know that there's a corresponding VSPACE (short for vertical space) for vertical positioning. These two tags work only with images (which is why you need the single pixel GIF in the first place). Remember that the command places however many pixels you specify both to the left AND right (or both above AND below the image): there's no way to use this command to make space just to one side of the image.

Copy the HTML code above and paste it to the beginning of each paragraph in the HTML code for this page (just after the <P> tags). Save your changes and reload this page.