如何让HTML中下方文本与上方文本产生间距（不重复用<br>标签）

核心原则：用CSS控制间距，实现内容与样式分离 #

<br>是强制换行标签，仅适用于语义上需要换行的场景（如诗歌、地址），用来设置段落间距属于语义滥用，且维护成本极高。用CSS控制才是高效、符合规范的方案，以下是几种最优实现：

1. 全局段落间距（最高效） #

给所有<p>标签设置上下外边距，一次配置即可全站生效，无需重复修改HTML：

/* 全局段落间距，数值可按需调整 */
p {
  margin-bottom: 1.5rem;
  /* 可选：如需顶部间距可添加，但避免上下同时设置导致双倍间距 */
  /* margin-top: 1.5rem; */
}

/* 可选：移除最后一个段落的底部间距，避免与后续元素间距过大 */
p:last-child {
  margin-bottom: 0;
}

2. 针对特定元素（如你的<blockquote>） #

如果需要给<blockquote>内的文本块设置间距，先把文本拆成独立的块级元素（如<p>），再用CSS控制：

修改后的HTML： #

<blockquote id="tomFrom">
  <p>"You don't make moral choices based on the outcome."</p>
  <p>You make them based on whether they're right or not."</p>
  <footer><cite>-Tom. From</cite></footer>
</blockquote>

方案A：用margin控制子元素间距 #

#tomFrom p {
  margin-bottom: 1rem;
}
#tomFrom p:last-child {
  margin-bottom: 0;
}

方案B：用gap属性（更省心） #

借助Flex布局的gap属性，直接设置子元素间的间距，无需处理首尾多余间距：

#tomFrom {
  display: flex;
  flex-direction: column;
  gap: 1rem; /* 子元素间的统一间距 */
}

为什么这些方案更高效？ #

• 语义正确：块级元素（<p>）本来就代表段落，符合HTML语义规范。
• 维护成本低：修改间距只需调整CSS数值，无需逐个修改HTML中的<br>标签。
• 灵活性高：可针对不同场景（全局/局部）设置不同间距，适配各种布局需求。

内容的提问来源于stack exchange，提问作者Jay