How to Add a Blank Line or Empty Row in HTML

Add vertical space in HTML with CSS margin or padding. Use br only for meaningful line breaks, and spacer rows with colspan for tables.

For space between HTML elements, use CSS margin or padding. Use <br> only when the line break is meaningful content, such as an address or poem line.

<p class="sign-off">Yours sincerely,</p>
<p>Ryan</p>
.sign-off {
  margin-bottom: 2rem;
}

Avoid repeated <br> tags, empty paragraphs, spacer &nbsp; characters and control-character entities solely to create layout. CSS keeps spacing consistent and adapts at different screen sizes.

If the space you need is an empty table row, jump to empty table rows. Tables need valid cells and colspan, not blank-line tricks.

Prefer CSS spacing between blocks

Block elements such as <p>, <div>, headings and list items already create structure. Control the gap with margin (outside the box) or padding (inside the box):

<section class="letter-close">
  <p>Yours sincerely,</p>
  <p class="signature">Ryan Sheehy</p>
</section>
.letter-close p {
  margin: 0;
}

.letter-close .signature {
  margin-top: 2.5rem;
}

Use a class rather than long chains of inline styles so the spacing can be reused and overridden cleanly.

When the layout is a real gap between sections, a margin on the section is usually clearer than padding inside a child:

.letter-close {
  margin-block: 2rem;
}

When <br> is appropriate

<br> means “this text continues on the next line.” It is for content structure, not vertical layout:

<p>
  Jane Doe<br>
  1 Fast Lane<br>
  Sydney NSW 2000
</p>

Do not stack multiple breaks to invent blank lines:

<!-- Avoid: layout via repeated breaks -->
<p>Yours sincerely,<br><br><br>Ryan</p>

If you only need more space between two blocks, go back to margin or padding. For a deeper look at the break tag itself, see insert line breaks in HTML.

Preserve intentional blank lines in text

When the source text already contains newlines that should be shown (poetry, code samples, fixed letter layouts), keep the content intact and let CSS honour whitespace:

<p class="poem">Yours sincerely,

Ryan</p>
.poem {
  white-space: pre-line; /* collapse spaces, keep newlines */
}

white-space: pre also keeps every space character; pre-line is usually better for prose. The older approach of wrapping everything in <pre> works, but it changes default font and can be harder to style consistently—prefer a normal element plus CSS when you can.

Empty row in a table

Blank lines and <br> do not create table structure. An empty row needs a valid <tr> with a valid cell. Span the columns and give the row height with CSS:

<tr class="spacer-row" aria-hidden="true">
  <td colspan="2"></td>
</tr>
.spacer-row td {
  height: 1rem;
  border: 0;
  padding: 0;
}

The colspan value must match the number of columns. Full example:

<table>
  <thead>
    <tr>
      <th>Header 1</th>
      <th>Header 2</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>First</td>
      <td>Row</td>
    </tr>
    <tr class="spacer-row" aria-hidden="true">
      <td colspan="2"></td>
    </tr>
    <tr>
      <td>Final</td>
      <td>Row</td>
    </tr>
  </tbody>
</table>

Without a height (or some content), many browsers collapse the row to near zero height. Prefer CSS height over stuffing &nbsp; into the cell so the markup stays empty and the space is controllable.

If every column needs its own empty cell instead of one spanned cell:

<tr class="spacer-row" aria-hidden="true">
  <td></td>
  <td></td>
</tr>

Horizontal rules versus blank space

<hr> inserts a thematic break (a horizontal rule), not blank space:

<p>First section</p>
<hr>
<p>Second section</p>

Style the rule if you need a subtle divider. If you only want empty vertical space, use margin—not an invisible <hr>.

What not to use for layout

TechniqueWhy to avoid for spacing
<br><br><br>Breaks are for line content, not gaps between blocks
<p></p> or <p>&nbsp;</p>Empty or spacer paragraphs are not semantic structure
&#10; / &#13; entitiesControl characters are not a layout system and render inconsistently
Runs of &nbsp;Fragile, hard to maintain, poor for responsive layout

Those patterns still appear in older templates and PDF generators. When you control the stylesheet, replace them with margin, padding or a real table spacer row.

Quick reference

NeedPrefer
Space between paragraphs or sectionsCSS margin / padding
Line break inside an address or poem<br>
Keep newlines from the source textwhite-space: pre-line (or pre)
Empty space inside a table<tr> + colspan + CSS height
Thematic divider<hr>

Start with semantic HTML for the content, then use CSS for the gap. That keeps the markup meaningful and the spacing easy to change later.