Machen Sie einen Raum zwischen Absatz (x) HTML, CSS

Question

Ich will Raum zwischen meinem <p>content</p> Tags. Nicht vor und nicht nach <p> Tags. Fx ist mein Code:

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

Ich will nicht Raum zwischen h1 und p, die mit Null-Marge auf h1 gemacht wird. Aber ich will nicht Platz nach dem letzten <p> Tag. Ist dies möglich, ohne: Last-Kind oder einige js / jQuery

?

Ich kann nicht gesetzt class = "liest" am letzten Tag, weil es ein CMS-System ist.

Answer 1

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

(Obwohl dies erfordert einen Browser mit besserer Unterstützung für CSS als IE6)

Answer 2

Wenn Sie nicht unterstützen IE6 erforderlich können Sie:

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

Wenn Sie IE6 unterstützen müssen, ist dies ein schmutziger Hack, aber es funktioniert ohne Javascript:

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

Der Nachteil dieser Methode ist, dass man nicht einfach verwenden kann, sagt sie, 1em für den Ausgleich Margen, da sie unterschiedliche Schriftgrößen haben. Sie können entweder manuell nach Bedarf anpassen oder Pixelbreiten verwenden.

Answer 3

Legen Sie einen Standard Bottom-Marge auf p, dann gibt dem letzten Tag eine Klasse ohne unteren Rand.

Answer 4

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

Answer 5

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

Answer 6

Wenn Sie es mehr Browser kompatibel machen möchten, können Sie auch verwenden:

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

Negativ Margen Elemente auf sich ziehen. Es ist chaotischer als Ich mag, aber wenn man auf Gedeih und Verderb ist von CMS-Code mit keiner Weise generierten Klassen hinzuzufügen, müssen Sie kreativ sein.