Come aggiungere spaziatura verticale tra elementi di blocco, ma non superiore e inferiore

Question

Dire che ho un mucchio di elementi P, LI o DIV, senza nulla tra di loro. Voglio controllare la spaziatura verticale tra loro, in modo che non si adattino così strettamente. Ma non voglio aggiungere nessuno spazio in alto e in basso, poiché questo è gestito dall'elemento genitore e non ho bisogno di altro. C'è un modo semplice per farlo che funzioni per tutti gli elementi di blocco?

dire che ho avuto qualcosa di simile:

p { 
    margin: 5px 0; 
    } 

e poi

<div> 
    <p>1</p> 
    <p>2</p> 
    <p>3</p> 
    <p>4</p> 
</div> 

Ma io non voglio 5px sopra p 1, o al di sotto p 4, dal momento che il div ha già imbottitura e non voglio andare a scherzare con quello. Voglio solo il 10px tra p 1 e p 2, p 2 e p 3, ecc.

Sono sicuro che potrei fare qualcosa di kludgy (e ho molte volte), ma sto cercando qualcosa di più pulito che io indossi Devo fare un sacco di involucri speciali per questa situazione comune.

Answer 1

Usa selettori adiacenti

p + p { margin-top: 10px; } 

Fondamentalmente il concetto è che, se un p arriva dopo l'altro margine 10px p dare in mezzo.

È uso è qualcosa di simile a

p + p, li + li, div + div { 
    margin-top: 10px; 
} 

Answer 2

p, li, div { 
    margin-bottom: 10px; 
} 
#parentID { 
    margin-bottom: -10px; 
} 

Answer 3

Questo può anche essere fatto utilizzando :last-child o :first-child

Ecco un esempio:

p, li, div { 
    margin-bottom: 10px; 
} 

p:last-child, li:last-child, div:last-child { 
    margin-bottom: none; 
} 

Answer 4

È possibile utilizzare adjacent selector s. È possibile definire in questo modo:

p + p{ 
margin-top:0; 
} 

O

p ~ p{ 
margin-top:0; 
} 

Answer 5

p { margin: 10px 0 0 0; } 
p:first-child { margin: 0; } 

Cioè, impostare un margine superiore di 10px per tutti p elementi e altri margini a zero, fatta eccezione per il primo p elemento, per il quale si imposta anche il margine superiore a zero.

Questo funziona più ampiamente di molti altri approcci, che utilizzano selettori contestuali che non sono supportati dai vecchi browser. Per ottenere il massimo supporto del browser, devi assegnare una classe al primo elemento p nel markup e utilizzare un selettore di classe invece di p:first-child.

Questo è il modo più semplice possibile, poiché il CSS funziona sugli elementi, non su cosa c'è tra gli elementi. Quindi è necessario un modo per distinguere il primo elemento p in una sequenza di elementi p.

Si noti che p { margin: 5px 0; } (menzionato nell'interrogazione) creerebbe margini verticali di 5px, non di 10px, perché i margini verticali adiacenti crollano.