Hot Tips Logo

Using "white space"

Add "lead" using spacer GIFs
When using spacer GIFs to add white space around your type, adopt the method preferred by most Web designers: incorporate the vspace and hspace attributes.

For example, rather than laying out your spacer GIFs like this:

<IMG src="spacer.gif" width=150 height=100>

place them this way:

<IMG src="spacer.gif" width=2 height=2 hspace=74 vspace=49>

If you compare the two approaches you'll see that the second one yields a cleaner, faster page.


What's a spacer GIF?
Spacer GIFs are to Web typography as thin pieces of lead are to traditional typography. In traditional print layouts, blocks of metal type were separated by thin pieces of lead (usually measured in points), hence the term leading. In Web typography, without the aid of Cascading Style Sheets, Web designers are limited to using a 1-pixel transparent GIF, usually called a spacer GIF, to separate lines of type

Cascading Style Sheets Cascading Style Sheets
are a big breakthrough in Web design because they allow developers to control the style and layout of multiple Web pages all at once. Before Cascading Style Sheets, changing an element that appeared on many pages required changing it on each individual page. Cascading Style Sheets work just like a template, allowing Web developers to define a style for an HTML element and then apply it to as many Web pages as they'd like. With CSS, when you want to make a change, you simply change the style, and that element is updated automatically wherever it appears within the site. Both Navigator 4.0 and Internet Explorer 4.0 support Cascading Style Sheets. If you needed any more proof of the problem-solving nature of CSS, the World Wide Web Consortium (W3C) has recommended Cascading Style Sheets (level 1) as an industry standard.
I deliberately put a border around both of these so you could see the "spacer.gif"

The blue example uses a spacer GIF (in the middle cell) with height and width dimensions set to 100 and 150. The red example, however, incorporates the hspace and vspace attributes to load the spacer GIF at its original 1-pixel size, accomplishing the same effect as the blue example.

Back to Index
Source Code and images proprietary©1999-2009 Bobbye, All Rights Reserved.
For questions or further information, contact
This site is optimized in 800 x 600 resolution