Space on a Web site would seem to be a fairly simple thing. But the first time you try hitting the <<ENTER>> key several times and having that information not appear on your page, you will realize that it's not as easy as it looks.
There are several ways to create space on a Web site. The first two are with HTML tags:
<p>...</p>
The paragraph marker will usually put a space between items. It acts as a
paragraph break. However, several <p>'s in a row will do nothing other
than clutter up your page. Some editors will put <p> </p>
in places to add more space, but this really isn't using the <p> tag, but
rather the character, which I'll get to in a minute.
More about the <p> tag.
<br />
The <br> tag is meant to put just a single line break in the flow of the text.
However it can be used multiple times in a row to create long strings of blank
space. The problem is, you can't define the height and width of the space, and
it is automatically the width of the page.
More about the <br> tag.
Single Pixel Images
Then David Siegel came up with the "Single Pixel GIF Trick". This involves using a transparent, 1x1 pixel image and sizing it to get exactly the amount of white space you need. The advantage to this is that it's very flexible. But if, for some reason, the images don't download, you could have a page that is very difficult to read, as the broken image icons would get in the way.
The Non-Breaking Space ( )
Finally, there is the non-breaking space. This character entity acts exactly like a normal text
space would, except that the browser treats each one individually. If you put
four in a row, the browser will put four spaces in the
text.
Note, older browsers may not render multiple non-breaking spaces.
Using Non-Breaking Spaces in Tables
Tables will often close or break if you do not include something in the cell to hold it open. For example: Use the following HTML to create a table with a 30 pixel gutter:
<table border="0">
<tr><td width="30"></td>
<td>
There should be a small amount of space to the left of this text. Some
browsers will display it properly, but many will ignore the table width
request and put the text flush with the left margin. Very annoying!
</td></tr>
</table>
To keep the table column from breaking, use a non-breaking space:
<table border="0">
<tr><td width="30"> </td>
<td>
There should be a small amount of space to the left of this text. With
the most browsers will display it properly.
</td></tr>
</table>
