Come si imposta lo spazio verticale tra le voci dell'elenco?

Question

All'interno di un elemento <ul>, è possibile formattare chiaramente la spaziatura verticale tra le linee con l'attributo altezza linea.

La mia domanda è, all'interno di un elemento <ul>, come si imposta la spaziatura verticale tra le voci dell'elenco?

Answer 1

Aggiungi un margin ai tag li. Ciò creerà spazio tra li ed è possibile utilizzare line-height per impostare la spaziatura sul testo all'interno dei tag li.

Answer 2

È possibile utilizzare il margine. Vedere l'esempio:

http://jsfiddle.net/LthgY/

li{ 
    margin: 10px 0; 
} 

Answer 3

HTML

<ul> 
    <li>A</li> 
    <li>B</li> 
    <li>C</li> 
    <li>D</li> 
    <li>E</li> 
</ul> 

CSS

li:not(:last-child) { 
    margin-bottom: 5px; 
} 

EDIT: Se non si utilizza la cassa speciale per l'ultimo elemento li tua la lista avrà una piccola spaziatura successiva che puoi vedere qui: http://jsfiddle.net/wQYw7/

Ora Confronti che, con la mia soluzione: http://jsfiddle.net/wQYw7/1/

sicuro che questo non funziona nei browser meno recenti, ma si può facilmente utilizzare js estensioni che permetteranno questo per i browser più vecchi.

Answer 4

Sarei incline a questo che ha il pregio del supporto IE8.

li{ 
    margin-top: 10px; 
    border:1px solid grey; 
} 

li:first-child { 
    margin-top:0; 
} 

JSFiddle

Answer 5

<br> tra <li></li> voci linea sembra funzionare perfettamente bene in tutti i browser web che ho provato, ma non riesce a passare il controllo W3C CSS3 on-line. Mi dà esattamente l'interlinea che sto cercando. Per quanto mi riguarda, dal momento che funziona indubbiamente, continuo a usarlo, a prescindere dal W3C, fino a quando qualcuno non riuscirà a trovare un'alternativa valida.