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

Question

假设我有一堆P，LI或DIV元素，它们之间没有任何内容。我想控制它们之间的垂直间距，所以它们不能很紧密。但我不想在顶部和底部添加任何空间，因为它由父元素处理，我不需要更多。是否有一种简单的方法可以对所有块元素起作用？

说我有这样的事情：

p {
  margin: 5px 0;
  }

然后

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

但我不希望5p高于p 1，或低于p 4，因为div已经有填充，我不想搞砸了。我只想要p 1和p 2之间的10px，p 2和p 3等等。

我确信我可以做一些kludgy（我有很多次），但我正在寻找更清洁的东西，我不需要为这种常见情况做很多特殊的套管。

Answer 1

使用相邻的选择器

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

基本上这个概念是，如果p来自另一个p，则会在其间提供10px的保证金。

您的使用类似于

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

Answer 2

也可以使用:last-child或:first-child

来完成

以下是一个例子：

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

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

Answer 3

您可以使用adjacent selector。您可以这样定义：

p + p{
 margin-top:0;
}

或

p ~ p{
 margin-top:0;
}

Answer 4

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

Answer 5

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

也就是说，将所有p元素的上边距设置为10px，将其他边距设置为零，除了第一个p元素，您甚至将上边距设置为零。

这比许多其他方法更广泛，这些方法使用旧浏览器不支持的上下文选择器。要获得真正最大的浏览器支持，您可以将一个类分配给标记中的第一个p元素，并使用类选择器而不是p:first-child。

这是最简单的方法，因为CSS对元素进行操作，而不是对元素之间进行操作。因此，您需要某种方法来区分p元素序列中的第一个p元素。

请注意，p { margin: 5px 0; }（在问题中提到）会创建5px的垂直边距，而不是10px，因为相邻的垂直边距会崩溃。