The Spacer GIF

layout hacks 1995 partly

A one pixel transparent gif, stretched, holding the entire layout apart.

In 2026: It still works, which is the problem. Every page of the period carried a dozen of these because tables had no reliable way to hold a fixed gap. Use padding.

Where it came from: Standard practice from about 1995. David Siegel's Creating Killer Web Sites, 1996, popularised it as the single pixel trick. Wikipedia ↗

<!-- The file itself: one transparent pixel, 43 bytes -->
<img src="https://xbawx.com/inc/img/demo/spacer.gif" width="1" height="20" alt="" border="0">

<!-- Holding a table column to exactly 150 pixels -->
<table cellpadding="0" cellspacing="0" border="0">
<tr>
  <td width="150"><img src="https://xbawx.com/inc/img/demo/spacer.gif" width="150" height="1" alt=""></td>
  <td>Content column</td>
</tr>
</table>

<!-- The 2026 version, using a data URI so you can see it work -->
<img alt="" height="20" width="1"
  src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7">
<span style="background:#333;color:#fff">the gap above is a spacer gif</span>

sandboxed demo · breaks nothing but itselfrestart

More in layout hacks