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 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 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
| Technique | Why to avoid for spacing |
|---|---|
<br><br><br> | Breaks are for line content, not gaps between blocks |
<p></p> or <p> </p> | Empty or spacer paragraphs are not semantic structure |
/ entities | Control characters are not a layout system and render inconsistently |
Runs of | 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
| Need | Prefer |
|---|---|
| Space between paragraphs or sections | CSS margin / padding |
| Line break inside an address or poem | <br> |
| Keep newlines from the source text | white-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.