CSS 如何在块元素之间添加垂直间距，而不是顶部和底部
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/10309408/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to add vertical spacing between block elements, but not top and bottom
提问by rob
Say I have a bunch of P, LI, or DIV elements, with nothing between them. I want to control the vertical spacing between them, so they don't fit so tightly. But I don't want to add any space top and bottom, since that is handled by the parent element and I don't need more. Is there a simple way to do this that works for all block elements?
假设我有一堆 P、LI 或 DIV 元素，它们之间没有任何内容。我想控制它们之间的垂直间距，所以它们不会那么紧密。但我不想在顶部和底部添加任何空间，因为这是由父元素处理的，我不需要更多。有没有一种适用于所有块元素的简单方法？
Say I've got something like this :
说我有这样的事情：
p {
margin: 5px 0;
}
and then
进而
<div>
<p>1</p>
<p>2</p>
<p>3</p>
<p>4</p>
</div>
But I don't want 5px above p 1, or below p 4, since the div already has padding and I don't want to go messing with that. I just want the 10px between p 1 and p 2, p 2 and p 3, etc.
但我不希望 p 1 以上或 p 4 以下 5px，因为 div 已经有填充，我不想弄乱它。我只想要 p 1 和 p 2、p 2 和 p 3 之间的 10px，等等。
I'm sure I could do something kludgy (and I have many times), but am looking for something cleaner that I don't have to do a lot of special-casing for this common situation.
我确信我可以做一些笨拙的事情（而且我有很多次），但是我正在寻找一些更清洁的东西，我不必为这种常见情况做很多特殊的外壳。
回答by Starx
Use adjacent selectors
使用相邻的选择器
p + p { margin-top: 10px; }
Basically the concept is that, if a pcomes after another pgive 10px margin in between.
基本上的概念是，如果一个接一个地p出现，则p在两者之间留出 10px 的边距。
You usage is something similar to
你的用法类似于
p + p, li + li, div + div {
margin-top: 10px;
}
回答by Starx
This can also be done using :last-childor :first-child
这也可以使用:last-child或:first-child
Here is an example:
下面是一个例子：
p, li, div {
margin-bottom: 10px;
}
p:last-child, li:last-child, div:last-child {
margin-bottom: none;
}
回答by sandeep
You can use adjacent selectors. You can define like this:
您可以使用相邻的选择器。你可以这样定义：
p + p{
margin-top:0;
}
OR
或者
p ~ p{
margin-top:0;
}
回答by Jukka K. Korpela
p { margin: 10px 0 0 0; }
p:first-child { margin: 0; }
That is, set a top margin of 10px for all pelements and other margins to zero, except for the first pelement, for which you set even the top margin to zero.
也就是说，将所有p元素的顶部边距设置为 10px，并将其他边距设置为零，除了第一个p元素，您甚至将其顶部边距设置为零。
This works more widely than many other approaches, which use contextual selectors that are not supported by old browsers. To get really maximal browser support, you would assign a class to the first pelement in markup and use a class selector instead of p:first-child.
这比许多其他方法更广泛，这些方法使用旧浏览器不支持的上下文选择器。为了获得真正最大的浏览器支持，您可以为p标记中的第一个元素分配一个类，并使用类选择器而不是p:first-child.
This is the simplest possible way, since CSS operates on elements, not on what's between elements. So you need some way of distinguishing the first pelement in a sequence of pelements.
这是最简单的方法，因为 CSS 对元素进行操作，而不是对元素之间的内容进行操作。因此，您需要某种方法来区分p元素序列中的第一个p元素。
Note that p { margin: 5px 0; }(mentioned in the question) would create vertical margins of 5px, not 10px, because adjacent vertical margins collapse.
请注意p { margin: 5px 0; }（在问题中提到）会创建 5px 的垂直边距，而不是 10px，因为相邻的垂直边距会折叠。
回答by kayen
p, li, div {
margin-bottom: 10px;
}
#parentID {
margin-bottom: -10px;
}
