Fare uno spazio tra il paragrafo (x) html, css

Question

Voglio spazio tra i miei tag <p>content</p>. Non prima e non dopo il tag <p>. FX è il mio codice:

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

Non voglio spazio tra h1 e p che viene fatto con margine zero h1. Ma io non voglio spazio dopo l'ultima tag <p>. È questo possibile senza: last-child o qualche js / jQuery

?

Non è possibile impostare class = "ultimo" l'ultimo tag, perché è un sistema CMS.

Answer 1

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

(Anche se questo richiede un browser con un supporto migliore per i CSS di IE6)

Answer 2

Se non ti viene richiesto di supportare IE6 è possibile utilizzare:

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

Se è necessario supportare IE6, questo è un hack sporco ma funziona senza Javascript:

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

Lo svantaggio di questo metodo è che non si può semplicemente utilizzare, ad esempio, 1em per i margini di bilanciamento in quanto hanno diverse dimensioni dei caratteri. Si sia possibile regolare manualmente come richiesto o utilizzare larghezze di pixel.

Answer 3

Imposta un approccio bottom-margine predefinito di p, poi dare l'ultimo tag di una classe senza fondo margine.

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

Se si vuole rendere più browser compatibile, si potrebbe anche usare:

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

margini negativi tirerà elementi verso di loro. E 'incasinato di quanto mi piace, ma quando si è in balia di CMS generato codice con alcun modo per aggiungere classi, bisogna essere creativi.