How to Create Whitespace With 'p' and 'br' Tags

Typing on keyboard
blackred/E+/Getty Images

Space on a website would seem to be a fairly simple thing. But the first time you try hitting the 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 website. The first two are with HTML tags:


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 we'll get to in a minute.

<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.

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.

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:  

  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!

To keep the table column from breaking, use a non-breaking space:

  There should be a small amount of space to the left of this text. Most browsers will display it properly.