The main ways to add space in HTML

HTML has three practical ways to add space: the non-breaking space entity for single spaces between words, the <br> tag for line breaks, and CSS margins and padding for spacing around elements. Which one you use depends on what kind of space you need and why.

If you want a space that won't collapse into a single space (the default HTML behavior), use &nbsp;. If you want to move content to a new line, use <br>. If you want to control the distance between elements or inside them, use CSS. Most modern spacing should be done in CSS, not HTML, because it keeps your content separate from how it looks.

Key Takeaways

  • The &nbsp; entity creates a single space that HTML won't collapse, useful for keeping words together or creating small gaps.
  • The <br> tag forces a line break and is the correct HTML way to break text into new lines.
  • CSS margin and padding properties control spacing around and inside elements and should be your first choice for layout spacing.
  • Multiple spaces typed directly in HTML collapse into one space automatically, so you cannot create gaps by pressing the spacebar.

Using &nbsp; for single spaces

The non-breaking space is written as &nbsp; in your HTML. It creates one space that will not collapse, and it prevents a line break from happening between the words on either side of it.

Use &nbsp; when you want to keep two words together on the same line, like in a name or a measurement. For example, 5&nbsp;meters keeps the number and unit together. You can also use multiple &nbsp; entities in a row to create larger gaps, though this is rarely the right approach — CSS is better for that.

Do not use &nbsp; to indent text or create layout. Browsers will render it as a single space character, and it will not line up the way you expect on different screen sizes.

Using <br> for line breaks

The <br> tag tells the browser to move to the next line. Write it as <br> or <br /> — both work the same way. Unlike most HTML tags, <br> does not wrap around content; it stands alone.

Use <br> when you need a line break as part of your content, like in a poem, an address, or a song lyric. For example:

123 Main Street<br> Springfield, IL 62701<br> United States

Do not use multiple <br> tags to create space between paragraphs or sections. Use the <p> tag for paragraphs and CSS margins for spacing between them instead.

Using CSS margins and padding for layout spacing

Margins create space outside an element, between it and other elements. Padding creates space inside an element, between its border and its content. Both are set in CSS, not HTML.

To add margin below a paragraph, write this in your CSS:

p { margin-bottom: 20px; }

To add padding inside a box or container, write:

.box { padding: 15px; }

You can set margin and padding on all four sides at once (margin: 10px;), on opposite sides (margin: 10px 20px; for top/bottom and left/right), or on individual sides (margin-top, margin-right, margin-bottom, margin-left). CSS spacing is flexible and scales with your design, so it is the right choice for most layout work.

Why HTML collapses multiple spaces

If you type multiple spaces in your HTML source code, the browser treats them as a single space. This is called whitespace collapsing. The same rule applies to tabs and line breaks in your source code — they all become one space in the rendered page.

This happens because HTML treats whitespace as formatting for readability in the code editor, not as content. If you type:

Hello world

The browser displays it as "Hello world" with one space. To create multiple spaces intentionally, use &nbsp; for each space you want, or use CSS to control spacing. This design choice keeps your HTML code readable without affecting how the page looks.

When to use HTML spacing versus CSS spacing

Use HTML spacing (&nbsp; and <br>) only when the space is part of your actual content. Use CSS spacing (margins and padding) for everything else.

For example, a line break in a poem is content, so use <br>. A gap between two sections of a page is layout, so use CSS margin. A non-breaking space in a product name like "iPhone&nbsp;15" is content, so use &nbsp;. The distance between a heading and the paragraph below it is layout, so use CSS.

Keeping this separation makes your code easier to change later. If you need to adjust spacing across your whole site, you can edit your CSS file once instead of hunting through your HTML for dozens of <br> tags.

Frequently Asked Questions

Can I use &nbsp; to indent a paragraph?

You can, but you should not. Multiple &nbsp; entities will not line up consistently across different devices and screen sizes. Use CSS margin-left or text-indent instead, which will scale properly.

What is the difference between <br> and <p>?

A <br> tag creates a single line break within content. A <p> tag wraps a paragraph and creates space above and below it by default. Use <p> for blocks of text and <br> only when you need a line break within that text.

How do I create a gap between two divs?

Use CSS margin on one or both divs. For example, margin-bottom: 30px; on the first div, or margin-top: 30px; on the second. You can also use gap in CSS Flexbox or Grid if your divs are inside a flex or grid container.

Does &nbsp; work the same in all browsers?

Yes. The non-breaking space is a standard HTML entity and works consistently across all modern browsers. It renders as a single space that prevents line breaks.