Machen Sie einen Abstand zwischen Absatz (x) html, css

Question

Ich möchte Abstand zwischen meinen <p>content</p> Tags. Nicht vorher und nicht nach <p> Tags. Fx mein Code ist:

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

Ich will keinen Raum zwischen h1 und p, die mit Null Rand auf h1 getan wird. Aber ich will keinen Platz nach dem letzten <p> Tag. Ist das möglich ohne: last-kind oder js/jQuery?

Ich kann nicht Klasse "letzte" auf dem letzten Tag festlegen, da es ein CMS-System ist.

Answer 1

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

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

Answer 2

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

?

Answer 3

Legen Sie einen Standard-unteren Rand auf p fest, und geben Sie dem letzten Tag eine Klasse ohne unteren Rand.

Answer 4

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

Answer 5

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

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

Wenn Sie muss IE6 unterstützen, das ist ein dreckiger 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 Sie, sagen wir einmal, 1em für die Ausgleichsränder nicht verwenden können, da sie unterschiedliche Schriftgrößen haben. Sie können entweder manuell nach Bedarf anpassen oder Pixelbreiten verwenden.

Answer 6

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

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

Negative Margen Elemente auf sie ziehen wird. Es ist unordentlicher, als ich es mag, aber wenn Sie dem CMS-generierten Code ausgeliefert werden, der keine Möglichkeit zum Hinzufügen von Klassen bietet, müssen Sie kreativ sein.