css - 如何在 block 元素之间添加垂直间距，但不是顶部和底部

Question

假设我有一堆 P、LI 或 DIV 元素，它们之间没有任何东西。我想控制它们之间的垂直间距，所以它们不会太紧。但我不想在顶部和底部添加任何空间，因为这是由父元素处理的，我不需要更多。有没有一种适用于所有 block 元素的简单方法？

假设我有这样的东西:

p {
  margin: 5px 0;
  }

然后

 <div>
   <p>1</p>
   <p>2</p>
   <p>3</p>
   <p>4</p>
 </div>

但我不希望 p 1 以上或 p 4 以下 5px，因为 div 已经有填充，我不想去弄乱它。我只想要 p 1 和 p 2、p 2 和 p 3 等之间的 10px。

我确定我可以做一些笨拙的事情(而且我有很多次)，但我正在寻找更清洁的东西，我不必为这种常见情况做很多特殊的外壳。

Answer 1

使用相邻的选择器

p + p { margin-top: 10px; }

基本上这个概念是，如果 p 跟在另一个 p 之后，则在两者之间留出 10px 的边距。

你的用法类似于

p + p, li + li, div + div { 
    margin-top: 10px;
}