CSS: Positioning

Layout-Single Pixel .gif Trick

I'm using a single pixel gif to create a the margin indent at the beginning of the paragraph you're reading. When placing an image on your page, you can identify height and width to stretch the image larger or smaller. The singel pixel gif trick uses this to help you control your margins and create a more asthetically pleasing page. Other attributes you can use with the <img> tag are those of hspace and vspace.

By using a transparent/clear, single pixel image, with hspace=x and vspace=y arguments in the <img> tag, you can position the elements on your page where you want them. The examples below will give you an idea of the differences between width(hspace)/height(vspace).

This has 5 pixels of hspace on either side.

This has 25 pixels of hspace on either side.

This has a width of 5 pixels.

This has a width of 25 pixels.

This has a width of 25 pixels and a height of 5 pixels.