How to Insert Vertical Space in HTML

To add vertical space between HTML elements, use CSS margin or padding; repeated blank lines in the HTML source do not create dependable layout gaps because browsers collapse ordinary whitespace. Use <br> when a line break is part of the content, such as an address. Use <hr> for a thematic break and <pre> for text whose spaces and line breaks should be preserved.

Insert Vertical Space with the HTML <br> Element

The <br> element starts a new line inside the same block of text. It fits content where each line matters, such as a postal address:

<p>HubSpot, Inc.<br>35 St. 2<br>California, USA</p>

Use separate paragraphs or CSS for separate blocks and their layout spacing. Adding repeated <br> elements to push content down ties presentation to markup and makes spacing harder to adjust consistently.

Control Vertical Spacing with CSS Margins and Padding

For layout spacing, CSS lets you set a consistent value and adjust it independently of the text. A margin is outside an element’s border; padding is inside the border, between the border and the content. The existing CSS box model diagram illustrates these layers.

For example, add a lower margin to paragraphs when you want a gap after each paragraph:

p { margin-bottom: 1rem; }

The margin-bottom property creates space outside the paragraph’s border. Choose a value such as 1rem to scale with the root font size, then adjust it to suit the surrounding design. Adjacent vertical margins can collapse, so the visible gap between two blocks may be the larger margin rather than their sum.

Use padding-bottom when the extra room should remain inside the element, for example when a background or border should extend through that room:

p { padding-bottom: 1rem; }

Padding increases the element’s box and can affect its total size. Apply it to the relevant element or component, and include the intended background and border when deciding which spacing method fits.

A complete page can keep its markup and style together. This JavaScript example prints a small HTML page source with consistent paragraph spacing:

const page = `<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <style>
    p { margin-bottom: 1rem; }
  </style>
</head>
<body>
  <p>First paragraph.</p>
  <p>Second paragraph.</p>
</body>
</html>`;
console.log(page);

The script prints HTML source; a browser applies the CSS when that source is opened as a page. The text display itself does not show the rendered spacing.

Reuse Spacing Rules with a CSS Class

When only selected elements need the same gap, define a reusable class instead of changing every paragraph:

.spacer { margin-bottom: 1rem; }

Apply it where the spacing is wanted, for example: <p class="spacer">First paragraph.</p><p>Second paragraph.</p>. The .spacer class keeps the value in one rule, so you can adjust those selected gaps together. Use a name that describes the component’s role when the rule belongs to a specific component.

Use <hr> and <pre> for Their Intended Purposes

The <hr> element represents a thematic break between parts of a page. Browsers commonly render it as a horizontal line, with default spacing that can be styled with CSS. It is not a blank spacer; use it when the change in topic or scene is meaningful.

The <pre> element presents preformatted text, preserving its spaces and line breaks in the text content. It is useful for code or other text where that formatting matters. It does not preserve blank lines in the surrounding HTML as a general layout technique. For space around a <pre> block, set CSS margins or padding on the element.