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.
CSS Margin and Padding
Another way to add space to your Web page documents is to use the CSS properties margin and padding. This is a much better way to get exactly the amount of space you want between your elements. And you can affect more than just the vertical space in a document.
What is the difference between padding and margins ?
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>
