在段落（x）html，css之间创建一个空格

Question

我希望<p>content</p>标签之间有空格。不是在<p>标记之前而不是之后。我的代码是：

<div>
   <h1>A headline</h1>
   <p>Some text</p>
   <p>Some text</p>
</div>
Something

我不希望h1和p之间的空间在h1上以零边距完成。但是我不想在最后<p>标签之后留出空格。这可能没有：last-child或一些js / jQuery吗？

我无法在最后一个标签上设置class =“last”，因为它是一个CMS系统。

Answer 1

p + p {
  margin-top: 1.5em;
} 

（虽然这需要一个比IE6更好地支持CSS的浏览器）

Answer 2

如果您不需要支持IE6，您可以使用：

div, h1, p { margin: 0; }
p + p { margin-top: 12px; }

如果你需要支持IE6，这是一个肮脏的黑客，但它没有Javascript工作：

div, h1, p { margin: 0; }
h1 { margin-bottom: -12px; }
p { margin-top: 12px; }

这种方法的缺点是你不能简单地使用1em作为平衡边距，因为它们有不同的字体大小。您可以根据需要手动调整或使用像素宽度。

Answer 3

将默认的下边距设置为p，然后为最后一个标记指定一个没有底边距的类。

Answer 4

<div>
   <h1>A headline</h1>
   <p>Some text</p>
   <div class="paragraph-space"></div>
   <p>Some text</p>
</div>

Answer 5

<div>
  <h1>A headline</h1>
  <p>Some text</p>
  <p style="margin-bottom: 0;">Some text</p>
</div>

Answer 6

如果您想使其更兼容浏览器，您还可以使用：

p { margin-top: 24px; }
h1 { margin-bottom: -24px; } // play with this value as necessary

负边距会拉动元素。它比我喜欢的更麻烦，但是当你受CMS生成的代码无法添加类的怜悯时，你必须要有创意。