HTML Images :
SPACING AROUND








You can easily add space over and under your images
with the Vspace attribute.

In a similar way you 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 you see these settings allow you to add spacing around your image. Unfortunately, they also force you to add the same spacing to each side of the image (over and under - or left and right).

The workaround for this, if you only want spacing on one side of the image is to use a 1x1 pixel transparent gif image.

If, for example, you wanted a 10 pixel spacing to the left of your image you could use the transparent image (pixel.gif) this way:



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


The 1x1 pixel transparent gif image is simply stretched to whatever size you want the spacing to have.

This 1x1 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 you complete pixel precision in your design!

 << PREVIOUS
READ MORE >>  
















DEVELOPER TIP!





     "Better Than Books - As Easy As It Gets!"