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

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

What to Know

  • Use the paragraph tag to position a space between two items.
  • Use the link break tag several times in a row to create a long string of blank space.
  • Wrap a non-breaking space in a paragraph element to force a browser to display consecutive blank lines.

This article explains several ways to create white space using the paragraph, line break, and non-breaking space tags.

Paragraph Tags

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.

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 line break 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 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?