如何根据上方DIV的存在/移除动态调整两个DIV间的间距？

当然可以用CSS实现这种需求，下面是几种实用的方案：

方案1：相邻兄弟选择器（最兼容） #

利用CSS的相邻兄弟选择器+，只有当DIV A直接紧邻在DIV B前面时，才给DIV B设置顶部间距。如果DIV A被移除，该样式自动失效，DIV B会使用默认间距。

/* 仅当 .div-a 直接在 .div-b 前方时，设置20px顶部间距 */
.div-a + .div-b {
  margin-top: 20px;
}

对应的HTML结构：

<div class="parent-div">
  <div class="div-a">DIV A</div>
  <div class="div-b">DIV B</div>
</div>

方案2：通用兄弟选择器（支持非紧邻场景） #

如果DIV A和DIV B之间可能存在其他元素，但DIV A仍在DIV B之前，可以用通用兄弟选择器~：

/* 所有在 .div-a 之后的 .div-b 都会被设置间距 */
.div-a ~ .div-b {
  margin-top: 20px;
}

注意：这个选择器会选中所有在.div-a之后的.div-b元素，适合有多个同类型元素的场景。

方案3：:has()选择器（最灵活，现代浏览器支持） #

如果需要更灵活的判断（比如不管DIV A和DIV B的位置关系，只要父容器里存在DIV A就设置间距），可以用CSS的:has()选择器：

/* 当父容器包含 .div-a 时，给 .div-b 设置间距 */
.parent-div:has(.div-a) .div-b {
  margin-top: 20px;
}

:has()支持所有现代浏览器（Chrome 101+、Firefox 121+、Safari 15.4+），兼容性足够覆盖绝大多数场景。

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