Css 如何在块元素之间添加垂直间距，而不是顶部和底部

假设我有一堆p、LI或DIV元素，它们之间什么都没有。我想控制它们之间的垂直间距，这样它们就不会紧密贴合。但我不想在顶部和底部添加任何空间，因为这是由父元素处理的，我不需要更多。是否有一种简单的方法可用于所有块元素

假设我有这样的东西：

p {
  margin: 5px 0;
  }

然后

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

一,

二,

三,

四,

但我不想让5px高于p1，或者低于p4，因为div已经有了填充，我不想去搞乱它。我只想要p1和p2，p2和p3之间的10px，等等

我相信我可以做一些笨拙的事情（我也做过很多次），但我正在寻找一些更干净的东西，对于这种常见的情况，我不需要做很多特殊的外壳。

使用相邻的选择器

p, li, div {
    margin-bottom: 10px;
}
#parentID {
    margin-bottom: -10px;
}

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

基本上，概念是，如果一个

p

在另一个

p

之后出现，则在两者之间留出10px的余量

你的用法与

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

---

也可以使用

：最后一个孩子

或

：第一个孩子

以下是一个例子：

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

p:last-child, li:last-child, div:last-child {
    margin-bottom: none;
}

你可以用s。您可以这样定义：

p + p{
 margin-top:0;
}

或

p ~ p{
 margin-top:0;
}

也就是说，将所有

p

元素的顶部边距设置为10px，并将其他边距设置为零，但第一个

p

元素除外，您甚至将其顶部边距设置为零

这比许多其他方法更有效，它们使用旧浏览器不支持的上下文选择器。要获得真正最大的浏览器支持，您需要将类分配给标记中的第一个

p

元素，并使用类选择器，而不是

p:first child

这是最简单的方法，因为CSS对元素进行操作，而不是对元素之间的内容进行操作。因此，您需要某种方法来区分

p

元素序列中的第一个

p

元素

---

请注意，

p{margin:5px 0；}

（问题中提到）会创建5px的垂直边距，而不是10px，因为相邻的垂直边距会塌陷。

您能举一个您尝试过的例子吗？仅仅是文本不足以理解您的问题。抱歉，它不清楚，经过编辑。最简单的方法是使用

p:last item{margin:0；}

@Starx是的，这可能是最简单的，但我在下面接受的答案是我知道必须存在的优雅方法。：）如果你把这句话放在你以前的答案中会更好：）@sandeep，实际上，这是一个有效的第二个答案我使用stackoverflow从一年前开始&我从来没有见过一个人对同一个问题给出两个答案。他们在同一个答案中添加了另一个选项。@sandeep，没有冒犯的意思，但你甚至懒得读我的帖子链接。这是完全可以张贴多个答案。只是需要有一个合理的理由。关于meta的这个问题，最流行的答案是关于非常不同（非常主观）的，@sandeep可能不会觉得这两个答案非常不同。如果你进一步观察，你会发现杰夫·阿特伍德不是那种认为一个用户应该回答两次的阵营。似乎每个人现在在这个问题上都是对的，因为什么时候可以分成两个答案是个人意见。谢谢你的链接，顺便说一句：）谢谢，但这种混乱是我现在所做的。希望有一个更干净的方法。

p { margin: 10px 0 0 0; }
p:first-child { margin: 0; }