By using this site you agree to the use of cookies by Brugbart and our partners.

Learn more

About white space in web design

Brugbarts recommendation on white space in web design.

Edited: 2011-03-16 02:38

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 may take some practice, but is the accepted way of doing things, since it separates 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, and other text which is pre-formated.

What you typically want to do however, is to use CSS properties, and markup the text in paragraphs. With the exception of code examples.

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 if using paragraphs.

Brugbart recommends that you use what is the easiest for you. If you can, stick with paragraphs. You can use the below regular expressions to replace line breaks properly.

/[\r\n]+/

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!