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

Question

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

说我有这样的东西：

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 等。

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

score 48 · Accepted Answer

Use adjacent selectors

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

Basically the concept is that, if a p comes after another p give 10px margin in between.

You usage is something similar to

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

score 4 · Accepted Answer

This can also be done using :last-child or :first-child

Here is an example:

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

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

score 2 · Accepted Answer

您可以使用相邻的选择器。你可以这样定义：

p + p{
 margin-top:0;
}

或者

p ~ p{
 margin-top:0;
}

score 0 · Accepted Answer

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，因为相邻的垂直边距会折叠。

score 0 · Accepted Answer

0

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

于 2012-04-25T04:42:46.220 回答

5 回答 5