在段落 (x)html、css 之间留一个空格答案

【问题标题】：Make a space between paragraph (x)html, css在段落 (x)html、css 之间留一个空格
【发布时间】：2009-09-24 02:07:54
【问题描述】：

我想在我的<p>content</p> 标签之间留一个空格。不在<p> 标签之前和之后。 Fx 我的代码是：

<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 系统。

【问题讨论】：

【解决方案1】：

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

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

【讨论】：

【解决方案2】：

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

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

如果你需要支持 IE6，这是一个肮脏的 hack，但它可以在没有 Javascript 的情况下工作：

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

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

【讨论】：

但是最后一种方法的问题是，如果我在 h1 之后有一个列表，那么它们会相互浮动。我会用IE7+。
如果你可以使用 IE7+，那么你就被排序了。我只是为了完整性而指出这一点，因为许多人仍然需要支持 IE6（很遗憾）。
另外，值得指出的是，我不建议对所有 div 都这样做。我会将一个类关联到您想要执行此操作的 div 上，您知道内容的格式以避免您提到的情况。相同的标题后跟列表问题与使用 + 选择器有相同的问题。

【解决方案3】：

将默认下边距设置为 p，然后给最后一个标签一个没有下边距的类。

【讨论】：

【解决方案4】：

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

?

【讨论】：

【解决方案5】：

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

【讨论】：

【解决方案6】：

如果你想让它更兼容浏览器，你也可以使用：

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

负边距会将元素拉向它们。它比我喜欢的要混乱，但是当您受制于 CMS 生成的代码而无法添加类时，您必须要有创意。

【讨论】：