6

我想要<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 系统。

4

6 回答 6

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

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

于 2009-09-23T06:13:31.000 回答
4

如果您不需要支持 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 作为平衡边距，因为它们具有不同的字体大小。您可以根据需要手动调整或使用像素宽度。

于 2009-09-23T06:19:34.037 回答
2

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

于 2009-09-23T06:13:28.847 回答
0

If you want to make it more browser compatible, you could also use:

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

Negative margins will pull elements toward them. It's messier than I like, but when you are at the mercy of CMS generated code with no way to add classes, you have to be creative.

于 2009-09-23T18:07:54.440 回答
0 
<div>
   <h1>A headline</h1>
   <p>Some text</p>
   <div class="paragraph-space"></div>
   <p>Some text</p>
</div>

?

于 2009-09-23T06:11:01.510 回答
0 
<div>
  <h1>A headline</h1>
  <p>Some text</p>
  <p style="margin-bottom: 0;">Some text</p>
</div>
于 2009-09-23T06:13:54.453 回答