*** Welcome to piglix ***

Spacer GIF


A spacer GIF is a small, invisible GIF image that is used in web design and HTML coding. They were used to control the visual layout of HTML elements on a web page, at a time when the HTML standard alone did not allow this. They became mostly obsolete after the adoption of Cascading Style Sheets.

David Seigel's 1996 book Creating Killer Web Sites [1] was the first known to publish the Spacer GIF technique. According to Seigel, he invented the trick in his living room.

The Cascading Style Sheets (CSS) standard diminished the use of spacer GIFs for laying out web pages. CSS can achieve the same effects in a number of ways, such as by changing the margin or padding on a given element or by explicitly setting a relative position.

It was recognised early on that although the size of table cells could not be set directly, each cell could contain an image through an <IMG> tag. The size of image tags could be set independently, with their WIDTH and HEIGHT attributes. To avoid the computational cost of rescaling the image, which could be considerable on contemporary hardware, the HSPACE and VSPACE attributes were recommended over setting the height and width.

The displayed size was controlled entirely by the attributes and was independent of the actual size of the image that was used. Accordingly, the same image file could be used for all the spacer images needed on a web page, leveraging browser caching. The only requirement was that this image was invisible, either by being the same color as the page, or by being transparent.

GIF files were used as it was a common format that supported transparency, unlike JPEG. PNG also supports transparency, but was in its infancy during this time, with poor browser support.

Designs produced often looked perfect on the designer's display, but could look entirely different on the reader's display. Different screen resolution, browser rendering engines, as well as user font preferences, could change the layout of the design considerably. Implementing a design with spacer GIFs could be extremely tedious - particularly when making small changes to an existing design.


...
Wikipedia

...