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

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;
}