Spacing Around Images in HTML

We can easily add space over and under our images with the Vspace attribute. In a similar way we can add space to the left and right of the image using the Hspace attribute. Below is an example using these attributes:

<img src="rainbow.gif" Hspace = "30"> Vspace = "10"

As we see these settings allow us to add spacing around our image. Unfortunately they also force us to add the same spacing to each side of the image (over and under - or left and right). The workaround for this, if we only want spacing on one side of the image is to use a 1 x 1 pixel transparent gif image. If, for example, we wanted a 10 pixel spacing to the left of our image we could use the transparent image (pixel.gif) this way:

<img src="pixel.gif" width = "10" height = "1"><img src = "rainbow.gif">

The 1 x 1 pixel transparent gif image is simply stretched to whatever size we want the spacing to have. This 1 x 1 pixel "cowboy-trick" is probably one of the most widely used workarounds on the entire net. The reasons are obvious: It works on all browsers and it gives us complete pixel precision in our design!