Share via:

Handling White Space And Linebreaks In Web Design

Recommendations on handling of white space in web design.


Edited: 2019-09-11 16:27

White space is often necessary to increase the readability of your pages. There are many ways a web designer can implement white space, but some of them are considered bad-practices from the past.

One of the reasons why so many dislikes WYSIWYG editors, is because they use nbsp (non breaking space) to indent text. If the designer presses space a set number of times, many WYSIWYG editors will start to include nbsp entities, which bloat the source.

What to use instead of nbsp

Web designers should use the margin, padding, and position properties of CSS instead. This will ideally separate the content from style.

There are also HTML elements, such as pre, which preserve the spaces, but these are only recommended to use in case you need to markup code examples or show contents of .txt files, and other pre-formated text.

Using br Elements or Paragraphs

A lot of designers prefer to use br elements, because they are easier for the developer to deal with. You can use a single regular expression when using br, while you may have to use multiple when using paragraphs.

We recommend that you use what is the easiest for you. But, if possible, try to stick with paragraphs. You can use the below regular expressions to replace line breaks properly.


Keep in mind that users might also insert multiple spaces, so you would also want to replace these with a single space, as well as trim the start and end of the imput. Finally, you should also delete empty paragraphs, created by your regular expressions. When you have done all this, you end up with a very clean input from the user.

If you are using PHP, i would recommend that you use something like the below script:

function ReplaceLineBreaks($input) {
// Replaces any number of linebreaks, with a single paragraph.
  $final = preg_replace("/[\r\n]+/", "</p><p>", $input);

// Replace any number of spaces/tabs with a single space.
  $final = preg_replace("/[\t]+/", " ", $final);

// Remove empty p elements inserted (if any)
  $final = str_replace("<p></p>", "", $final);

// Removes white space at the start and end of the input.
  $final = trim($final);
  return $final;

Using images for white space

While i shouldn't have to mention this, for obvious reasons, some people might get the idea. It is also possible to insert a single-pixel transparent image.

So let me just get this straight, using images for white space, is one of the worst things you can do! This is both because it works to bloat the source, and because it creates additional http requests, potentially slowing down your site. In short, use CSS instead!