html - 段落（x）html、cssの間にスペースを空けます

Question

<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なしで可能ですか？

最後のタグはCMSシステムであるため、class="last"を設定できません。

score 14 · Accepted Answer

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

（これには、IE6よりもCSSをサポートするブラウザーが必要ですが）

score 4 · Accepted Answer

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をバランスマージンに単純に使用できないことです。必要に応じて手動で調整するか、ピクセル幅を使用できます。

score 2 · Accepted Answer

デフォルトのボトムマージンをpに設定してから、最後のタグにボトムマージンのないクラスを指定します。

score 0 · Accepted Answer

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

？

score 0 · Accepted Answer

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 に答える

score 0 · Accepted Answer

ブラウザとの互換性を高めたい場合は、次を使用することもできます。

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

負のマージンは要素をそれらに引き寄せます。私が好きなよりも厄介ですが、クラスを追加する方法がないCMSで生成されたコードに翻弄される場合は、創造性を発揮する必要があります。

6 に答える 6