The three ways to add a space in HTML
HTML collapses multiple spaces into one by default. If you type five spaces between two words in your HTML file, the browser displays only one. To add extra spaces that actually show up on the page, you need to use one of three methods: the non-breaking space code, the preformatted text tag, or CSS.
The most common method is the non-breaking space, written as in your HTML. Each creates exactly one space that the browser will display. If you need five spaces, you type five times. This works for small spacing jobs but becomes tedious for large blocks of indented text.
For preserving multiple spaces and line breaks together — like in code samples or poetry — use the <pre> tag (short for preformatted). Everything inside <pre> and </pre> displays exactly as you typed it, spaces and all. The third option, CSS, lets you control spacing more precisely for design purposes, which we'll cover in its own section below.
Key Takeaways
- HTML automatically collapses multiple spaces into a single space, so typing extra spaces in your code does not create extra spaces on the page.
- Use to add individual spaces one at a time when you need a few extra spaces between words or elements.
- Use the <pre> tag when you need to preserve multiple spaces and line breaks exactly as you typed them.
- CSS properties like margin, padding, and letter-spacing give you precise control over spacing for layout and design.
Using for single extra spaces
The non-breaking space code is the quickest way to add one or two extra spaces. Type it directly into your HTML wherever you want a space to appear. For example, if you want two spaces between two words, write word1 word2. Each counts as one space.
The word "non-breaking" means the browser will not wrap to a new line at that space — the two words will stay together. This is useful when you want to keep related items on the same line, like a person's first and last name or a number and its unit (like "5 miles").
Do not use for layout spacing. If you need to indent a paragraph or create distance between sections, CSS is the right tool. Filling your HTML with dozens of codes makes the file hard to read and harder to change later.
Using the <pre> tag to keep spaces and line breaks
The <pre> tag tells the browser to display text exactly as you typed it — all spaces, all line breaks, all indentation. This is essential when showing code samples, ASCII art, or any text where spacing matters to the meaning.
For example, if you write a block of code inside <pre> tags with indentation, that indentation will show on the page. Without <pre>, the browser would collapse all those spaces into one. Here is the structure:
<pre> function hello() { console.log("Hello"); } </pre>
The indentation before console.log will display exactly as you typed it. The <pre> tag also uses a monospace font by default (like Courier), which is standard for code. If you want to change the font or styling, you can add CSS to the <pre> tag itself.
Using CSS for layout spacing and design
When you need to control spacing for layout — like pushing a button away from text, indenting a paragraph, or creating gaps between sections — use CSS instead of HTML space codes. CSS gives you precise measurements and makes changes much easier.
The most common CSS properties for spacing are margin (space outside an element) and padding (space inside an element). For example, to add 20 pixels of space above a paragraph, you would write margin-top: 20px; in your CSS. To add space between letters in a word, use letter-spacing: 2px;.
CSS spacing is measured in units like pixels (px), ems (em), or percentages (%), not in "number of spaces". This gives you control that cannot provide. If you need to adjust spacing later, you change one CSS rule instead of hunting through your HTML for dozens of space codes.
When to use each method
Use only for small, semantic spacing — like the space in a person's name or between a number and its unit. It is quick and requires no CSS knowledge, but it clutters your HTML if overused.
Use <pre> when the exact spacing and line breaks are part of the content itself, such as code samples, poetry, or ASCII diagrams. The tag preserves everything you type.
Use CSS for all layout and design spacing. It keeps your HTML clean, makes your page easier to maintain, and gives you precise control. Most professional websites use CSS for spacing because it scales — you can change spacing across your entire site by editing one CSS file.
Common mistakes with spacing in HTML
The biggest mistake is typing multiple spaces in your HTML and expecting them to show up. They will not. The browser sees word word (five spaces in the code) and displays only one space on the page. This confuses new writers because the code looks right but the page does not match.
Another mistake is using for indentation or layout. If you need to indent a whole paragraph, using 40 codes is slow, hard to read, and breaks if you change your design. CSS solves this in one line.
A third mistake is forgetting that <pre> preserves everything, including unwanted spaces. If your code sample has extra blank lines or trailing spaces, they will all display. Clean up your code before putting it inside <pre> tags.
Frequently Asked Questions
Why does HTML collapse multiple spaces into one?
HTML treats whitespace (spaces, tabs, line breaks) as a single space by design. This lets writers format their HTML code for readability without affecting how the page looks. The browser focuses on the tags and content, not the spacing in the source file.
Can I use inside a <pre> tag?
Yes, but you do not need to. Everything inside <pre> already displays as typed, so regular spaces work fine. Using inside <pre> is redundant and makes the code harder to read.
What is the difference between margin and padding for spacing?
Margin is space outside an element, between it and other elements. Padding is space inside an element, between the edge and the content. If you want space around a button, use margin. If you want space between the button text and the button edge, use padding.
Can I add a tab character instead of spaces?
In regular HTML, tabs collapse to a single space just like multiple spaces do. If you need to preserve tabs, use the <pre> tag. In CSS, you can use text-indent to indent the first line of a paragraph, which is cleaner than typing tab characters.
Is the same as a regular space?
Functionally, yes — both display as a single space. The difference is that will not break into a new line, while a regular space might if the line is too long. For most purposes, they look identical on the page.