Layout - Refactoring HTML: Improving the Design of Existing Web Applications - page 191

Replace Spacer GIFs
Delete all spacer GIFs. Use CSS margin , padding , position , and indent properties as necessary to reproduce
their effects.
<td>
<img src="images/spacer.gif" hspace="10" vspace="1">
</td>
<p>foo</p>
<img src="images/spacer.gif" hspace="1" vspace="10">
<p>bar</p>
<img src="images/spacer.gif" hspace="1" vspace="10">
<td style="width: 10px;">
&nbsp;
</td>
<p style="margin-bottom: 1ex;">foo</p>
<p style="margin-bottom: 1ex;">bar</p>
Motivation
Spacer GIFs were a really ugly hack from the days even before tables, much less CSS. They may have made
sense in 1995 (barely), but they're in no way necessary today. It's shocking that these are still showing up on
web sites, even new ones.
Spacer-GIF-based layouts are fragile and unreliable. They tend to break in modern browsers. They do not scale
well with increased or decreased font sizes.
Spacer GIFs without alt attributes cause massive problems for screen readers.
Furthermore, many browsers and browser plug-ins today refuse to load single-pixel GIFs because they are
commonly abused for user tracking.
Potential Trade-offs
None.
Mechanics
To find spacer GIFs, just search your web site for the word spacer (case-insensitive). Any hits on that string are
a red flag. Of course, there's nothing magical about the name spacer, though it is by far the most common.
Other names I've seen pop up more than once include transparent.gif, 1.gif, and 1x1.gif. If you discover any
spacer GIFs using a different name, search for those too to see what other files they may be infecting. You may
even find a few spacer "GIFs" that are actually JPEGs or PNGs, and of course, you should replace these as well.
Spacer GIFs can and should be replaced by CSS rules. Exactly which properties you replace them with will
depend on the use to which the spacer GIF was put, but usually it's one or more of margin, padding, or position
that's involved.