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

When CSS is overkill, simple HTML creates whitespace structures on your page

Typing on keyboard
blackred/E+/Getty Images

The best way to effect spacing and positioning on a web page is to apply specific style sheets. However, in limited cases, HTML markup gets the job done.

Paragraph Tags

The paragraph marker will usually put a space between items. It acts as a paragraph break. Browsers ignore repeated empty paragraph elements, so adding blank ones won't necessarily add extra spaces.

The Line Break

The <br /> tag is meant to put just a single line break in the flow of the text. However, it can be used several 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.

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.

The HTML string &nbsp; inserts a non-breaking space. Wrap a non-breaking space within a paragraph element to "force" the browser to display several consecutive blank lines.

Older browsers may not render multiple non-breaking spaces.

Was this page helpful?