代码之家 › 专栏 › 技术社区 › Lasse Espeholt

在段落(x)HTML、CSS之间留出空间

paragraph space xhtml html

Lasse Espeholt · 技术社区 · 15 年前

我想要我的 <p>content</p> 标签。不早不晚 <p> 标签。FX我的代码是:

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

我不需要h1和p之间的空间,h1上的零边距。但我不想在最后一次之后有空间 <P & GT; 标签。如果没有:最后一个子级或一些JS/JQuery,这是可能的吗?

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

6 回复 | 直到 15 年前

Quentin 15 年前

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

(尽管这需要一个比IE6更好地支持CSS的浏览器)

cletus 15 年前

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

da5id 15 年前

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

user170442 15 年前

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

James Skidmore 15 年前

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

rhodesjason 15 年前

如果要使其更兼容浏览器,还可以使用:

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

负的页边距会将元素拉向它们。这比我喜欢的要凌乱,但是当你任由CMS生成的代码摆布,没有办法添加类时,你必须有创造力。