The main ways to add space in HTML
HTML itself has no built-in spacing command. The language is designed to describe what content is — a heading, a paragraph, a link — not how much room it takes up. To add space between elements, you use one of three approaches: HTML tags that create line breaks and indentation, CSS properties that control margins and padding, or special characters that add space within text.
Most professional websites use CSS for spacing because it keeps the code cleaner and makes changes easier across many pages at once. But HTML tags like <br> and <pre> work for straightforward cases, and they teach you how spacing actually works in a browser.
Key Takeaways
- The <br> tag creates a single line break; use it when you need one blank line within text, not for spacing between sections.
- CSS margin and padding properties control space around and inside elements and are the standard way to space a page professionally.
- The <pre> tag preserves spaces and line breaks exactly as you type them, useful for code examples or formatted text.
- Non-breaking spaces ( ) add single spaces within text that won't break across lines, but should not be used to create layout spacing.
- Divs and other container elements combined with CSS padding create the structured spacing that makes pages readable.
Using the <br> tag for line breaks
The <br> tag creates a single line break — it moves the next content to a new line. Write it as <br> or <br />; both work the same way. A <br> does not add extra space above or below, it just ends the current line.
Use <br> when you need a line break within a paragraph or address. For example, a mailing address reads better with line breaks between street, city, and zip code. Do not use multiple <br> tags in a row to create space between sections — that is what CSS margins are for, and it breaks on different screen sizes.
Example: <p>123 Main Street<br>Springfield, IL 62701</p> displays the address on three lines instead of one long line.
Adding space with CSS margin and padding
CSS margin and padding are the professional way to add space. Padding is space inside an element, between its border and its content. Margin is space outside an element, between it and other elements. Both use the same units: pixels (px), ems (em), or percentages (%).
Write margin and padding in your <style> tag or in a separate CSS file. For example, p { margin-bottom: 20px; } adds 20 pixels of space below every paragraph. You can set margin and padding on all four sides separately: margin-top, margin-right, margin-bottom, margin-left. Or use the shorthand: margin: 10px 20px 10px 20px; sets top, right, bottom, left in that order.
Margins between two elements sometimes collapse — if one element has margin-bottom: 20px and the next has margin-top: 20px, the space between them is 20px, not 40px. This is normal browser behavior and usually what you want. Padding does not collapse.
The <pre> tag for preserving exact spacing
The <pre> tag (short for "preformatted") displays text exactly as you type it, including all spaces and line breaks. Browsers normally collapse multiple spaces into one, so <pre> is useful when spacing matters — for code examples, poetry, or ASCII art.
Text inside <pre> appears in a monospace font (like Courier) by default, which is why it looks like code. If you want to show code with exact spacing but change the font, add CSS: <pre style="font-family: Arial;">.
Example: <pre>Name: John<br>Age: 30<br>City: Boston</pre> displays the spaces between the colons and values exactly as written, instead of collapsing them.
Non-breaking spaces for text that should not wrap
The code (non-breaking space) adds a single space that prevents a line break at that point. Use it when two words should stay together, like a person's first and last name or a number and its unit.
Write John Smith to keep the name on one line, or 100 miles to keep the number and unit together. Do not use multiple codes in a row to create layout spacing — that is hard to maintain and breaks on mobile screens. Use CSS padding or margin instead.
Spacing inside containers with padding
A div or other container element with CSS padding creates breathing room around content. Padding is the space between the container's edge and the content inside it. This is how professional pages create margins on the sides and top and bottom.
For example, <div style="padding: 20px;">Your content here</div> adds 20 pixels of space on all four sides of the content. You can set different padding on each side: padding-top: 30px; padding-left: 15px; and so on. This approach scales better than <br> tags because the spacing adjusts if you change the container width or move content to a mobile screen.
Spacing between sections with margin
Margin creates space outside an element, pushing other elements away. Use margin to space sections apart — the gap between a heading and the paragraph below it, or between two articles on a page.
Set margin on the element that needs space around it. For example, h2 { margin-bottom: 30px; margin-top: 40px; } adds 40 pixels above every heading and 30 pixels below. This is cleaner than adding <br> tags by hand, and if you decide headings need more space later, you change one line of CSS instead of editing every page.
Frequently Asked Questions
What is the difference between margin and padding?
Padding is space inside an element, between its border and its content. Margin is space outside an element, between it and other elements. If an element has a background color, padding is inside that color and margin is outside it.
Can I use multiple <br> tags to create space between paragraphs?
Technically yes, but it is not recommended. Multiple <br> tags are hard to maintain and break on mobile screens where space is tight. Use CSS margin on paragraphs instead — p { margin-bottom: 20px; } — so the spacing adjusts automatically.
Why do my spaces disappear when I add multiple spaces in HTML?
Browsers collapse multiple spaces into one by default. If you need exact spacing, use the <pre> tag, or use CSS padding and margin. The code adds a single non-breaking space, but it is not meant for layout spacing.
Should I use pixels, ems, or percentages for spacing?
Pixels (px) are straightforward and predictable for fixed spacing. Ems (em) scale with the text size, so spacing grows if the user increases font size — useful for accessibility. Percentages (%) are relative to the parent element's size, helpful for responsive layouts. Start with pixels while learning, then explore the others.
How do I center content with spacing?
Use margin: auto; on a fixed-width element to center it horizontally. For example, div { width: 600px; margin: auto; } centers a 600-pixel-wide div on the page. For vertical centering, use flexbox: display: flex; justify-content: center; align-items: center;.