The three ways to add space in HTML

HTML itself has only two built-in ways to create space: the <br> tag for line breaks and the <pre> tag to preserve spaces you type. Everything else — the gaps around buttons, the breathing room between paragraphs, the indent before a quote — comes from CSS, the styling language that works alongside HTML. When you see space on a webpage, it's almost always CSS doing the work, not HTML.

The reason matters: HTML is for structure (what content exists), and CSS is for presentation (how it looks). Trying to add space with HTML alone leads to messy code that breaks easily. Learning the CSS way teaches you how websites actually work.

Key Takeaways

  • The <br> tag creates a line break within text, and <pre> preserves spaces you type, but neither is meant for layout spacing.
  • CSS margin creates space outside an element's border, pushing other elements away.
  • CSS padding creates space inside an element's border, between the border and the content.
  • You add CSS to HTML using a <style> tag in the head, inline styles on individual elements, or a separate CSS file.
  • The most common spacing mistake is using multiple <br> tags or non-breaking spaces to push content around instead of using margin or padding.

Using the <br> tag for line breaks

The <br> tag forces text to move to the next line. It's a self-closing tag, meaning it has no closing partner — you write <br> or <br /> and that's it. Use it when a line break is part of the actual content, like in a poem, an address, or song lyrics.

A common mistake is using multiple <br> tags to create vertical space between paragraphs. This works visually but breaks the meaning of your HTML. A browser or screen reader sees a paragraph, then five line breaks, then another paragraph — it doesn't understand that you wanted space between two separate thoughts. Use CSS margin instead.

Example of correct use:

<p>123 Main Street<br> Springfield, IL 62701</p>

Preserving spaces with the <pre> tag

The <pre> tag tells the browser to display text exactly as you typed it, preserving all spaces, tabs, and line breaks. Normally, HTML collapses multiple spaces into one. Inside <pre>, they stay.

This is useful for code samples, ASCII art, or formatted text where spacing matters to the meaning. Outside of those specific cases, <pre> is rarely the right choice for layout. The text inside also displays in a monospace font (like Courier) by default, which may not match your design.

Example:

<pre> Name: John Smith Email: john@example.com Phone: 555-0123 </pre>

Adding space with CSS margin

Margin is the space outside an element's border. It pushes other elements away. If you set a margin on a paragraph, you create space between that paragraph and whatever comes before or after it.

You can set margin on all four sides at once, or on individual sides. In a <style> tag in your page's head, you'd write:

p { margin: 20px; }

This puts 20 pixels of space on all sides of every paragraph. You can also target individual sides:

p { margin-top: 20px; margin-bottom: 20px; }

Or use the shorthand, which goes top, right, bottom, left:

p { margin: 20px 10px 20px 10px; }

Margin collapses between elements. If one paragraph has margin-bottom: 20px and the next has margin-top: 20px, the space between them is 20 pixels, not 40. The browser uses the larger of the two values.

Adding space with CSS padding

Padding is the space inside an element's border, between the border and the content. If you put padding on a button, you make the clickable area larger and give the text room to breathe inside it.

The syntax is identical to margin:

button { padding: 10px 15px; }

This puts 10 pixels of padding on the top and bottom, and 15 pixels on the left and right. Unlike margin, padding does not collapse — each element's padding is independent.

Padding is especially useful on containers like boxes, cards, or buttons where you want the content to have breathing room inside a defined area. Margin is better for controlling the space between separate elements.

How to add CSS to your HTML

You have three options: a <style> tag in the head of your page, inline styles on individual elements, or a separate CSS file.

The <style> tag approach works for small pages or when you're learning. Put it in the <head> section:

<head> <style> p { margin-bottom: 20px; } button { padding: 10px 15px; } </style> </head>

Inline styles attach CSS directly to an element using the style attribute:

<p style="margin-bottom: 20px;">This paragraph has space below it.</p>

A separate CSS file is the professional approach. Create a file called style.css, write your CSS rules in it, then link it in your head:

<head> <link rel="stylesheet" href="style.css"> </head>

For anything beyond a quick test, a separate file keeps your HTML clean and lets you reuse the same styles across multiple pages.

Common spacing mistakes and how to fix them

Using multiple <br> tags to create vertical gaps is the most common mistake. It works visually but confuses the structure of your page. Replace them with CSS margin on the elements you want to separate.

Using non-breaking spaces (&nbsp;) to indent text or create columns is another trap. It looks right until someone views your page on a phone, and then the layout falls apart. Use CSS padding or margin instead, or learn about CSS layout tools like flexbox.

Forgetting that margin collapses can lead to unexpected spacing. If two elements both have large margins, the space between them won't be the sum of those margins — it'll be whichever is larger. This is usually what you want, but it surprises people at first.

Setting the same margin or padding value everywhere often doesn't look balanced. A button that's 10 pixels on all sides looks cramped because the text inside takes up more vertical space than horizontal space. Try different values for top/bottom versus left/right.

Frequently Asked Questions

What's the difference between margin and padding?

Margin is space outside an element's border that pushes other elements away. Padding is space inside the border between the border and the content. Think of a picture frame: margin is the distance from the frame to other objects in the room, padding is the space between the frame and the picture inside it.

Can I use HTML entities like &nbsp; to add space?

You can, but you shouldn't for layout. Non-breaking spaces are meant to keep two words together on the same line, not to create visual gaps. Using them for spacing breaks on mobile devices and confuses screen readers. Use CSS margin or padding instead.

How do I center content with spacing?

Set margin: 0 auto; on the element you want to center. This sets the top and bottom margin to zero and the left and right margin to auto, which makes the browser split the available space equally on both sides. This works on block-level elements like paragraphs and divs, not inline elements like links.

What units should I use for margin and padding?

Pixels (px) are the most common and easiest to understand when you're learning. Percentages (%) are useful when you want spacing to scale with the element's size. Relative units like em and rem are more advanced but help with responsive design. Start with pixels and experiment as you learn.

Why does my spacing look different on mobile?

Fixed pixel values don't scale to smaller screens. A 20-pixel margin might be fine on a desktop but too large on a phone. Learn about CSS media queries, which let you set different spacing rules for different screen sizes, or use relative units like percentages that adjust automatically.