Even in today’s CSS3 world, it is often useful to use the old ‘clear pixel‘ trick to create gaps and spaces of finite pixel widths. But often, in the middle of a project, it is difficult to find that old single pixel transparent GIF file and get it into your images directory.

There is an easier way! Use the base 64 encoded version Just keep this string handy…

“data:image/gif;base64,R0lGODlhAQABAIAAAP///////yH5BAEKAAEALAA
AAAABAAEAAAICTAEAOw==”

Use this as the image “src” attribute and you’ll have instant clear pixel of width 1 to use as you like.

A php example:

$clr =”data:image/gif;base64,R0lGODlhAQABAIAAAP///////yH5BAEKAAEALAA
AAAABAAEAAAICTAEAOw==”;

<img src=”<?=$clr?>” width=”20″ />

creates a gap of 20 pixels.

NOTE: The string had to wrap to fit this blog post. Please be sure to use both parts!

Cheers!

If you have a tip for me to share, let me know.