如何在HTML中高效使用多个<br>标签？寻求替代重复写法的简便方法

AI 小北

2026-5-29

替代连续10个<br>标签的简便方法

当然有啦！连续堆一堆<br>标签不仅显得代码冗余，后期要调整间距也得逐个修改，太麻烦了。这里有几种更简洁、更易维护的方案：

用CSS margin/padding精准控制间距（最推荐）
把需要分隔的内容放在独立的块级元素里（比如<p>或<div>），通过CSS的外边距（margin）或内边距（padding）来设置间距，完全不用依赖<br>：
```
<div class="content-container">
  <p>Hello</p>
  <p>Good bye!</p>
</div>

<style>
  /* 给第一个段落设置底部外边距，拉开和下一段的距离 */
  .content-container p:first-child {
    margin-bottom: 6rem; /* 数值可以根据需求调整，对应10个<br>的高度 */
  }
</style>
```
这种方式符合HTML语义化原则，而且后期要调整间距，只需要修改CSS里的数值就行，非常灵活。
用空容器做占位空白块
如果只是需要一段固定高度的空白区域，可以直接添加一个空的<div>，用CSS设置它的高度来代替多个<br>：
```
<HTML>
  Hello
  <div class="vertical-spacer"></div>
  Good bye!
</HTML>

<style>
  .vertical-spacer {
    height: 180px; /* 调整到你需要的空白高度 */
  }
</style>
```
这种方法直观易懂，一眼就能看出这里是专门的空白占位，代码可读性更高。
利用CSS line-height（仅适合单行文本场景）
如果你的内容是单行文本，也可以给父元素设置较大的line-height来拉开间距，但这种方法局限性较强，只适合简单场景：
```
<div class="text-section">
  Hello
  <br>
  Good bye!
</div>

<style>
  .text-section {
    line-height: 12; /* 数值需根据字体大小调整，精准度不如margin */
  }
</style>
```