如何添加块元素之间的垂直间距，但不是顶部和底部 [英] How to add vertical spacing between block elements, but not top and bottom

问题描述

说我有一堆P，LI或DIV元素，它们之间没有任何东西。我想控制它们之间的垂直间距，因此它们不能这么紧密。但我不想添加任何空间顶部和底部，因为这是由父元素处理，我不需要更多。有一个简单的方法来做到这一点，适用于所有块元素？

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 {
  margin: 5px 0;
  }

，然后

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

但我不想在p1或p4以下的5px，因为div已经填充和我不想去搞乱。我只想在p 1和p 2，p 2和p 3等之间的10像素。

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.

我相信我可以做一些kludgy ），但是我正在寻找更清洁的东西，我不必为这种常见的情况做很多特殊的外壳。

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.

推荐答案

p>使用邻近选择器

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

基本上概念是，如果 p

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

您的用法与

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

这篇关于如何添加块元素之间的垂直间距，但不是顶部和底部的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！