When authoring web pages and programming in HTML, you might have noticed that no matter how many spaces you put between words or text elements they get collapsed to a single space when rendering the page.
When writing text or sentences in most text processing software, you will be able to hit the space bar multiple times and add multiple spaces wherever you want. Depending on the HTML editor you are using, you might be able to do it in the editor as well, but as soon as the page renders in a web browser those spaces disappear.
This can be really confusing for new users and novice programmers. You look at the source code and see the multiple spaces but somehow the webpage does not have it. This is because of how HTML specification works and how the rendering engines are programmed. But all is not lost….
spaces between words or characters in text elements
To insert multiple spaces, you need to know about the extended HTML character: or the non-breaking space character. You can use these to add an extra space almost anywhere you like. Let’s look at an example:
<p>this is a short sentence with extra spaces between text</p>
The above example will display or render in the web browser as:
this is a short sentence with extra spaces between text
You can use this between any elements and with in any HTML tag. Here we have used the <p> or paragraph tag, but you could use it within div or span as well. This is useful for adding horizontal spaces between words and characters. If you are thinking about adding vertical space between words or sentences then that is called line height and line height can be customized in completely different ways.
using css to add word spacing
The above method of using non-breaking space character is probably the most flexible approach as it gives you the ability to randomly insert spaces where you want them. This is all good and well when you only add some spaces here and there. But if you want to consistently add extra spaces between every word in the entire text element then it can become pretty cumbersome.
So to do that with this method you will need to add the non-breaking space character between every single word in the text. The other option is to use the CSS property for word spacing. The CSS property is named word-spacing and can used with any HTML tag that displays text.
<p style=”word-spacing: 40px”>this is a sample sentence with extra wide word spacing between text</p>
The above code will render as:
this is a sample sentence with extra wide word spacing
spaces between paragraphs or other text elements in the page
Although it is a bad way to achieve this, you can add the non-breaking space (
) to add spaces between paragraphs as well. The better way to do this would be using a cascading style sheet or the style tag.
So, the first method to add the space between two paragraphs would be to add a new empty paragraph between them. You can achieve this by using the non-breaking space characters with in the p tags.
<p>first paragraph here</p>
You can add as many of these “extra” paragraphs as you need adding space between paragraphs. A slightly better option is to use the line break tag in HTML, which is the <br> tag.
You can add as many br tags as you want to add vertical space between text or visual blocks in HTML. And the best way is to use the style tag or CSS and adjust the margin or padding of the element. How to do that is probably beyond the scope of this post…