Creating Whitespace with P and BR Tags

Valid Methods to Create Vertical Whitespace

Typing on Keyboard
blackred/E+/Getty Images

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>