n the early days of web design, HTML limitations inspired designers to find all sorts of workarounds in order to have control over the layout of pages. One of the most significant of these workarounds was the single pixel GIF trick, using a single pixel GIF and modifying it with the height, width, hspace, and vspace attributes of the IMG tag.

The GIF itself is tiny and requires virtually no download time. And, depending on whether the single pixel is transparent or not, the result can be used as a spacer, or as a horizontal or vertical rule.

Before the advent of Cascading Style Sheets (CSS), the single pixel GIF was the only thing that provided reliable control of white space across browser versions and platforms. Though the trick is still useful, setting CSS margin and indent properties is a better solution for spacing when your readers are using CSS-compliant browsers.

How to make and use a single pixel GIF

1. Use your graphics program and create a one-pixel-by-one-pixel indexed color image of the color you wish to use. Or, to create a spacer GIF, make it transparent.
2. Save the image. Store it with a name you can remember and easily use, like "onepixel-green.gif" or "spacer.gif."
3. If you are editing HTML by hand:
   1. At the point in the HTML file where you want to use the single pixel GIF, insert the image tag:
      <img src ="onepixel-green.gif"
   2. Add the height and width (or hspace and vspace) attributes, setting them at the size you'd like the rule, box, block, or spacer to be:
      <img src ="onepixel-green.gif" width=10 height=100
   3. Add an align attribute to specify the alignment:
      <img src ="onepixel-green.gif" width=10 height=100 align=left
   4. End the tag:
      <img src ="onepixel.gif" width=10 height=100 align=left>
   5. Preview your page in the browser.
4. If you are using an HTML editor:
   1. Place the single pixel GIF where you want it on the page
   2. With the single pixel GIF highlighted (don't click elsewhere on the page, it will be very difficult to highlight it again)
   3. Enter the new height and width (or hspace and vspace) values into the properties palette.
   4. The single pixel GIF will visibly adjust on the page to reflect these values.