【问题标题】: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 上以零边距完成的。但我不想在最后一个 &lt;p&gt; 标记之后有空格。如果没有 :last-child 或一些 js/jQuery,这可能吗?

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

【问题讨论】:

    标签: html xhtml space paragraph


    【解决方案1】:
    p + p {
      margin-top: 1.5em;
    } 
    

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

    【讨论】:

    • 很好,我会试试的。我的目标是 IE7+、Chrome、Safari 4+、FireFox 2+
    【解决方案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,然后给最后一个标签一个没有下边距的类。

    【讨论】:

    • 我不能这样做,因为文本是用 CMS 呈现的。
    • 好吧,设置 margin-top 为 "div p" 和负 margin-bottom 为 "div h1" 怎么样?
    • 我尚未对其进行测试,但带有 p + p 的 cletus 解决方案适用于 IE7+。那会做......我希望;)谢谢:)
    【解决方案4】:
    <div>
       <h1>A headline</h1>
       <p>Some text</p>
       <div class="paragraph-space"></div>
       <p>Some text</p>
    </div>
    

    ?

    【讨论】:

    • 感谢您的回复,但我无法以这种方式控制文本。 (CMS)
    【解决方案5】:
    <div>
      <h1>A headline</h1>
      <p>Some text</p>
      <p style="margin-bottom: 0;">Some text</p>
    </div>
    

    【讨论】:

    • 感谢您的回复,但我无法以这种方式控制文本。 (CMS)
    【解决方案6】:

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

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

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

    【讨论】:

      猜你喜欢
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 2013-11-24
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 2014-02-07
      相关资源
      最近更新 更多