Create HTML Whitespace

Creating spaces and physical separation of elements in HTML can be difficult to understand for the beginning web designer. This is because HTML has a property known as "whitespace collapse." whether you type 1 space or 100 in your HTML code, the web browser automatically collapses those spaces down to just one single space. This is different from a program like Microsoft Word, which allows document creators to add multiple spaces to separate words and other elements of that document. This is not how website design spacing works.

So, how do you add whitespaces in HTML that show up on the web page you've built? This article examines some of the different ways.

Spaces in HTML With CSS

The preferred way to add spaces in your HTML is with Cascading Style Sheets (CSS). CSS should be used to add any visual aspects of a webpage, and since the spacing is part of the visual design characteristics of a page, CSS is where you want this to be done.

In CSS, you can use either the margin or padding properties to add space around elements. Additionally, the text-indent property adds space to the front of the text, such as for indenting paragraphs.

Here is an example of how to use CSS to add space in front of all of your paragraphs. Add the following CSS to your external or internal style sheet:

p {
text-indent: 3em;
} 

Read More

How to Use HTML and CSS to Create Tabs and Spacing

By Jennifer Kyrnin

Spaces in HTML Inside Your Text

If you just want to add an additional space or two to your text, you can use the non-breaking space. This character acts just like a standard space character, only it does not collapse inside the browser. 

Here is an example of how to add five spaces inside a line of text:

This text has     five extra spaces inside it

Uses the HTML:

This text has     five extra spaces inside it

You can also use the <br> tag to add extra line breaks.

This sentence has five line breaks at the end of it <br/><br/><br/><br/><br/>

Why Spacing in HTML Is a Bad Idea 

While these options both work – the non-breaking spaces element will indeed add spacing to your text and the line breaks will add spacing beneath the paragraph shown above – this is not the best way to creating spacing in your webpage. Adding these elements to your HTML adds visual information to the code instead of separating the structure of a page (HTML) from the visual styles (CSS). Best practices dictate that these should be separate for a number of reasons, including ease of updating in the future and overall file size and page performance. 

If you use an external style sheet to dictate all your styles and spacing, then changing those styles for the entire site is easy to do, since you simply have to update that one style sheet.

Consider the example above of the sentence with five <br> tags at the end of it. If you wanted that amount of spacing at the bottom of every paragraph, you would need to add that HTML code to every paragraph in your entire site. That is a fair amount of extra markup which will bloat your pages. Additionally, if you decide down the road that this spacing is too much or too little, and you wish to change it a bit, you would need to edit every single paragraph in your entire website. No thank you!

Instead of adding these spacing elements to your code, use CSS. 

p {
padding-bottom: 20px;
}

That one line of CSS would add spacing under your page's paragraphs. If you wanted to change that spacing in the future, edit this one line (instead of your entire site's code) and you are good to go!

Now, if you need to add a single space in one part of your website, using a <br /> tag or a single non-breaking space is not the end of the world, but you need to be careful. Using these inline HTML spacing options can be a slippery slope. While one or two may not hurt your site, if you continue down that path, you will introduce problems into your pages. In the end, you are better off turning to CSS for HTML spacing, and all other webpage visual needs.​