如何为h1、h2等特定元素内的<br>换行设置专属外边距？

这个场景我之前做项目时也碰到过，刚好有几个靠谱的方案，完全能避开你提到的「不能改<br>样式、不能调整全局line-height、不能修改<p>段落间距」这些限制：

1. 用相邻兄弟选择器精准控制元素前后间距 #

这是最常用的方案，能精准定位特定元素（比如h1/h2）和它直接相邻的元素之间的间距，不会影响全局样式：

/* 给 h1 后面紧跟的任意元素添加上边距（实现h1下方的换行间距） */
h1 + * {
  margin-top: 2rem; /* 自定义你需要的间距值 */
}

/* 给 h1 前面紧跟的任意元素添加下边距（实现h1上方的换行间距） */
* + h1 {
  margin-bottom: 1.5rem; /* 自定义你需要的间距值 */
}

如果只想针对某类元素（比如只调整h1和p之间的间距），可以把*换成具体的选择器，比如h1 + p或者p + h2，这样更精准。

2. 给标题元素本身设置margin，结合:not()排除特殊情况 #

如果需要给标题元素默认的上下间距，但又想保留<p>原有的段落间距，可以用这个方法：

/* 给所有h1设置默认的上下间距 */
h1 {
  margin-top: 2rem;
  margin-bottom: 1.5rem;
}

/* 排除「p后面紧跟h1」的情况，保持p原有的底部间距 */
p + h1 {
  margin-top: 0;
}

这样既实现了h1和其他元素之间的特定换行间距，又不会破坏你已经设置好的<p>段落间的外边距。

3. 处理元素内部的手动换行（比如标题内的换行） #

如果你的需求是元素内部的手动换行（比如h1里的多行文本需要特定间距），可以用<span>包裹换行的内容，再给span设置样式：

/* 把行内span转成行内块级，就能设置margin */
.title-break {
  display: inline-block;
  margin-top: 0.8rem; /* 自定义内部换行的间距 */
}

对应的HTML写法：

<h1>主标题内容<span class="title-break">第二行标题内容</span></h1>

这个方法完全不会影响全局的<br>标签，只针对你标记的特定换行内容生效。

额外提示 #

如果需要控制非直接相邻的元素间距，可以用通用兄弟选择器~（比如h1 ~ p），但要注意它会选中h1之后所有的p元素，使用时要谨慎。

内容的提问来源于stack exchange，提问作者R. Kohlisch