The spacer GIF trick

For really precise control over page layout, and if you haven’t yet got the hang of CSS positioning, you can’t beat the old spacer GIF trick. This involves using a 1 pixel x 1 pixel transparent GIF, which will be invisible in your Web pages, and using the width and height attributes to control the precise padding between page elements such as images, text and table cells. For example, the code:

<img src="one.gif" width="20" height="20" border="0">
<img src="space.gif" width="10" height="1" border="0">
<img src="two.gif" width="20" height="20" border="0">

will create a 10-pixel horizontal gap between the two images, one.gif and two.gif.

You can use spacer GIFs in table cells to “pad out” the table cell and make sure it doesn’t shrink below a certain width or height. In this code example:

<td><img src="space.gif" width="1" height="20" border="0"></td>

the table cell will always be at least 20 pixels high.

It’s easy to make a spacer GIF in your graphics package – create a new 1 pixel x 1 pixel image then save it as a GIF with a transparent background. Alternatively you can download one here (zipped up for easier download).

Of course, these days you should really be using CSS positioning to lay out your content.