HTML treats multiple spaces as one space, so you need a specific code to add extra spacing
When you type multiple spaces in HTML, the browser collapses them into a single space. If you want actual gaps between words or elements, you have three working methods: the non-breaking space entity ( ), the preformatted text tag (<pre>), or CSS spacing properties like margin and padding. Which one you use depends on what you're trying to space out and why.
The most common mistake is typing extra spaces in your HTML and expecting them to show up. They won't. A browser sees this:
Hello world
And displays it as:
Hello world
Understanding why this happens — and which tool fixes it — saves you from hours of confusion.
Key Takeaways
- Use when you need one or a few extra spaces between words or characters within a line of text.
- Use the <pre> tag when you want to preserve all the spaces, tabs, and line breaks exactly as you typed them.
- Use CSS margin or padding when you're spacing out larger blocks like paragraphs, buttons, or divs rather than individual words.
- Never use multiple codes for large gaps — that's a sign you should use CSS instead.
The non-breaking space entity for small gaps between words
The non-breaking space is the quickest fix when you need one or two extra spaces in a sentence. Type in your HTML, and the browser displays it as a single space that won't break across lines. Each counts as one space.
Here's the actual code:
<p>Hello world</p>
This displays as: Hello world (with three spaces instead of one).
Use this method when you're adding a few spaces within a sentence or between words. It's simple and works everywhere. Don't use it for large gaps — if you find yourself typing ten times in a row, you should switch to CSS instead.
The preformatted text tag for preserving exact spacing
The <pre> tag tells the browser to display text exactly as you typed it, including all spaces, tabs, and line breaks. This is useful when you're showing code, poetry, or any text where spacing matters.
Here's how it works:
<pre>Name: JohnAge: 25City: Boston</pre>
The browser displays this with all the spaces you typed, aligned in columns. Without the <pre> tag, the browser would collapse those spaces into single spaces.
One important note: text inside <pre> uses a monospace font (like Courier) by default, which looks like code or typewriter text. If you want the spacing preserved but need a different font, you can add CSS to change it — but the spacing itself will stay intact.
CSS margin and padding for spacing larger elements
When you're spacing out blocks of content — paragraphs, buttons, divs, images — CSS is the right tool. Margin creates space outside an element, and padding creates space inside it.
Here's a real example. If you want space between two paragraphs:
<p style="margin-bottom: 20px;">First paragraph.</p><p>Second paragraph.</p>
The margin-bottom: 20px; adds 20 pixels of space below the first paragraph. You can also use margin-top, margin-left, and margin-right to space elements in any direction.
For space inside an element — like padding around text inside a button or box — use padding:
<button style="padding: 10px 20px;">Click me</button>
This adds 10 pixels of space above and below the text, and 20 pixels on the left and right. CSS spacing is cleaner, more flexible, and easier to change later than typing dozens of codes.
When to use each method: a quick decision guide
The method you choose depends on what you're spacing. Use this table to decide:
| What you're spacing | Use this method | Example |
|---|---|---|
| A few extra spaces within a sentence | | Hello world |
| Text where spacing and line breaks matter (code, poetry) | <pre> | Formatted code or ASCII art |
| Space between paragraphs, buttons, or blocks | CSS margin or padding | <p style="margin-bottom: 20px;"> |
Common mistakes and how to avoid them
The biggest mistake is typing multiple spaces and expecting them to work. Browsers ignore them by design — it's part of how HTML is supposed to work. If you see extra spaces in your code but not on the page, you've hit this issue.
Another common mistake is using for large gaps. If you're typing it more than three or four times in a row, stop and use CSS instead. It's cleaner, easier to adjust, and won't break if you need to change the spacing later.
A third mistake is forgetting that <pre> changes the font to monospace. If you want preserved spacing but need a different look, add a CSS rule to change the font-family while keeping the <pre> tag.
Frequently Asked Questions
Can I use a tab character instead of spaces?
In regular HTML, tabs are treated like spaces and collapsed into one. If you want to preserve tabs, use the <pre> tag. Outside of <pre>, use CSS or to create the spacing you need.
What's the difference between margin and padding?
Margin is space outside an element's border, pushing other elements away. Padding is space inside the element, between the border and the content. Use margin to separate elements from each other, and padding to give breathing room to content inside a box or button.
Does work on mobile phones?
Yes, works the same way on mobile and desktop browsers. It displays as a single space that won't break across lines, which is actually useful on mobile where line breaks happen more often.
Can I use line breaks in HTML to create space?
The <br> tag creates a line break, not horizontal space. Multiple <br> tags stack vertically. For horizontal spacing between words, use or CSS. For vertical spacing between blocks, use CSS margin.
What if I need different amounts of space on different screen sizes?
Use CSS media queries to change margin and padding based on screen size. This lets you add more space on desktop and less on mobile, or vice versa. and <pre> don't have this flexibility.