如何在CSS中为紧邻subtitle的title移除底部外边距？

CSS本身没有“前兄弟选择器”，但我们可以通过两种方式实现需求：

方案1：用CSS :has() 选择器（现代浏览器首选） #

这是最直接的解决方案，利用:has()选择器精准匹配后面紧跟着.subtitle的.title，直接移除它的margin-bottom：

.title, .subtitle {
  border: 1px solid black;
}
/* 核心规则：当.title的下一个相邻元素是.subtitle时，清除底部外边距 */
.title:has(+ .subtitle) {
  margin-bottom: 0;
}
.title + .subtitle {
  background: yellow;
  margin-top: 0; /* 可选：避免subtitle自身的上外边距叠加 */
}

目前Chrome、Firefox 121+、Safari等主流现代浏览器都支持:has()选择器，能完美满足需求。

方案2：兼容旧浏览器的替代方法（利用margin折叠特性） #

如果要兼容不支持:has()的旧浏览器，可以借助CSS垂直margin折叠的特性，用负margin抵消.title的底部间距：

假设.title默认的margin-bottom是1rem，可以给后续的.subtitle设置负的margin-top：

.title, .subtitle {
  border: 1px solid black;
}
.title {
  margin-bottom: 1rem; /* 保留默认底部间距 */
}
.title + .subtitle {
  background: yellow;
  margin-top: -1rem; /* 负外边距抵消title的底部间距 */
}

这种方法不需要依赖新特性，所有浏览器都能兼容，视觉效果和直接移除title的margin-bottom一致。

示例HTML（无需修改）：

<header>
<h3 class="title">My title</h3>
<p class="subtitle">my subtitle: top space now OK!</p>
</header>
<p> some text lorep ipsum: top space OK</p>
<header>
<h3 class="title">My title</h3>
<p>my other text: top space OK</p>
</header>

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