# How to Add Space in HTML: Every Method Explained Spacing in HTML doesn't work the way most beginners expect. Drop five blank lines in your HTML file and the browser renders exactly one space. That's because HTML collapses **whitespace** by default — consecutive spaces, tabs, and line breaks are treated as a single space character. Understanding why this happens, and knowing which tool to reach for, is what separates clean, maintainable layouts from spacing held together with workarounds. ## Why HTML Ignores Extra Whitespace Browsers parse HTML through a rendering engine that normalizes whitespace in text nodes. This behavior is intentional — it lets developers write readable, indented code without that formatting bleeding into the visual output. The trade-off is that adding space requires *explicit* methods rather than just pressing the spacebar or Enter key. ## The Main Ways to Add Space in HTML ### 1. Non-Breaking Space (` `) The most commonly used HTML entity for spacing is ` ` — short for **non-breaking space**. It inserts a single space character that the browser won't collapse. ```html

Hello   World

``` This works for small inline gaps, but stacking multiple ` ` entities to create layout spacing is considered poor practice. It's fragile, hard to maintain, and breaks down at scale. **When it's appropriate:** Preventing a line break between two words (e.g., "10 km" staying on one line), or adding a single intentional inline gap in text. ### 2. CSS `margin` and `padding` For layout-level spacing, **CSS** is the right tool — full stop. Margin adds space *outside* an element; padding adds space *inside* it. ```css p { margin-bottom: 24px; padding: 16px; } ``` You can apply these inline using the `style` attribute, in a `