如何仅在上方存在其他div时为目标div添加顶部内边距？

完全可以用CSS实现这个需求，给你几个精准的方案：

方案1：精准匹配相邻的情况（推荐） #

用相邻兄弟选择器，只给紧跟在.AboutDogs后面的.AboutCats加顶部内边距：

.AboutDogs + .AboutCats {
  padding-top: 20px;
}

这种写法只会触发两者相邻的场景，要是.AboutCats是父元素里的第一个子元素，完全不会生效，刚好符合你的要求。

方案2：匹配同层级后续的情况（可选） #

如果.AboutDogs和.AboutCats之间可能插其他元素，但你希望只要.AboutCats在.AboutDogs后面就加间距，用通用兄弟选择器：

.AboutDogs ~ .AboutCats {
  padding-top: 20px;
}

不过要是你的场景里两者肯定相邻，方案1更精准。

方案3：通用非首元素场景（补充） #

要是你需要更宽泛的规则——只要.AboutCats不是父元素的第一个子元素就加内边距（不管前面是什么元素），可以这么写：

.AboutCats:not(:first-child) {
  padding-top: 20px;
}

适合页面里还有其他元素可能出现在.AboutCats前面的情况。

测试示例 #

当页面只有.AboutCats时：

<div class="MainContainer">
  <main>
    <div class="AboutCats"></div>
  </main>
</div>

上面的所有CSS方案都不会给它加顶部内边距，不会出现多余的空白。

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