The main ways to add space in HTML
HTML itself has no built-in command to create blank space the way pressing the spacebar does in a word processor. The browser collapses multiple spaces, tabs, and line breaks into a single space. To add visible gaps between elements on a web page, you use one of three methods: HTML entities for small gaps within text, CSS margins and padding for space around elements, or semantic HTML tags like paragraphs and line breaks for structural spacing.
Which method you choose depends on what kind of space you need. If you want a gap between words or inside a sentence, use an HTML entity. If you want space around a box, button, or block of content, use CSS. If you want to separate paragraphs or create line breaks, use HTML tags designed for that purpose.
Key Takeaways
- The entity creates a single non-breaking space;   creates a wider space equal to the width of the letter M.
- CSS margin adds space outside an element's border, while padding adds space inside the border.
- The <br> tag creates a line break, and the <p> tag creates a paragraph with automatic spacing above and below.
- Multiple spaces in your HTML code are ignored by the browser unless you use an entity or CSS to create them intentionally.
- Margins and padding are the standard way to control spacing in modern web design because they work consistently across all browsers.
HTML entities for small spaces within text
An HTML entity is a code that represents a character the browser displays. For spacing, the most common entity is , which stands for "non-breaking space." When you type in your HTML, the browser shows a single space that will not break into a new line if the text wraps. This is useful when you want two words to stay together, like a person's first and last name or a number and its unit.
Other spacing entities include   (an en space, half the width of the letter M) and   (an em space, the full width of the letter M). These are less common but useful when you need a wider gap for visual effect. For example, Price:  $50 creates two em spaces between the label and the price, aligning them visually without using a table.
The limitation of entities is that they work only for small gaps within text. If you need space around a whole block of content—like padding inside a button or margin around an image—you must use CSS instead.
CSS margin and padding for space around elements
Margin and padding are CSS properties that control space around HTML elements. The difference is straightforward: padding is space inside the element's border, and margin is space outside the border. Both are measured in pixels (px), percentages (%), or other units.
To add padding inside a button, you write:
<button style="padding: 10px 15px;">Click me</button>
This creates 10 pixels of space above and below the text, and 15 pixels on the left and right. To add margin around the button so it does not touch other elements, you write:
<button style="margin: 20px;">Click me</button>
This adds 20 pixels of space on all four sides. You can also set different values for each side: margin: 10px 20px 10px 20px; sets top, right, bottom, and left in that order. Most web developers use CSS in a separate stylesheet rather than inline styles, but the principle is the same.
Line breaks and paragraphs for structural spacing
The <br> tag creates a line break without adding extra space. When you use <br>, the next content starts on a new line when ready below. This is useful for poetry, addresses, or any text where line breaks matter but you do not want the extra gap that a paragraph creates.
The <p> tag wraps a paragraph and automatically adds margin above and below it. By default, browsers add about 16 pixels of space before and after each paragraph. If you want to change that spacing, you can use CSS: <p style="margin-bottom: 30px;"> increases the space below the paragraph to 30 pixels.
Do not use multiple <br> tags to create space between sections. Instead, use separate <p> tags or use CSS margin on a <div> container. Multiple line breaks are harder to maintain and do not scale well if you later want to change the spacing across your whole page.
Why the browser ignores extra spaces in your code
When you write HTML, the browser treats all whitespace—spaces, tabs, and line breaks—as a single space. This is called whitespace collapsing. If you write:
<p>Hello world</p>
The browser displays "Hello world" with only one space, no matter how many spaces you typed. This happens because HTML is designed to separate content from presentation. The content is the text; the presentation (including spacing) is controlled by CSS or HTML entities.
This rule applies to line breaks too. If you press Enter multiple times in your code, the browser still shows only one space. This is why you must use <br> or <p> tags to create intentional line breaks, or CSS to create intentional gaps.
Common spacing mistakes and how to fix them
A frequent mistake is using multiple entities to create a large gap. While this works, it is fragile—if you later change the font size or the page width, the spacing breaks. A better approach is to use CSS margin or padding, which scales automatically.
Another mistake is using <br> tags to add space between sections. This works visually but makes your HTML harder to read and maintain. If you want space between two paragraphs, add margin to the <p> tag instead: <p style="margin-bottom: 20px;">.
A third mistake is mixing spacing methods. If you use both margin and padding on the same element, or both <br> tags and CSS margin, the spacing can become unpredictable. Choose one method per element and stick with it. For most modern web pages, CSS margin and padding are the standard because they are flexible, reusable, and work the same way across all browsers.
Frequently Asked Questions
What is the difference between and a regular space?
A regular space can break into a new line if the text wraps. A non-breaking space ( ) keeps two words together on the same line. Use for things like names or units that should not split across lines.
Can I use CSS to add space inside text without using entities?
Not directly. CSS margin and padding work on whole elements, not on individual words or characters. For space within text, use or  . For space around text or blocks, use CSS.
Why does my padding not show up when I add it to a button?
Make sure you are using the correct syntax: style="padding: 10px;" with a colon and semicolon. Also check that the padding value is large enough to see—10 pixels or more is usually visible. If the button has a border or background color, the padding will be more obvious.
Should I use margin or padding to space out my paragraphs?
Use margin on the <p> tag itself. Set margin-bottom to control space below each paragraph, or margin-top to control space above. This is cleaner than using <br> tags and easier to change later.
What happens if I use both margin and padding on the same element?
Both explore. Padding adds space inside the element, and margin adds space outside. This is often useful—for example, a button might have padding to space the text away from the edges, and margin to space the button away from other elements.