Hoe stel ik verticale ruimte in tussen lijstitems?

Binnen een <ul>-element kan de verticale afstand tussen regels duidelijk worden opgemaakt met het kenmerk line-height.

Mijn vraag is, binnen een <ul>element, hoe stel ik de verticale afstand tussen de lijstitems in?

Antwoord 1, autoriteit 100%

U kunt marge gebruiken. Zie het voorbeeld:

http://jsfiddle.net/LthgY/

li{
  margin: 10px 0;
}

Antwoord 2, autoriteit 43%

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;
}

BEWERKEN:
Als u het speciale geval voor het laatste li-element niet gebruikt, heeft uw lijst daarna een kleine spatie die u hier kunt zien: http://jsfiddle.net/wQYw7/

Vergelijk dat nu met mijn oplossing: http://jsfiddle.net/wQYw7/1/

Natuurlijk werkt dit niet in oudere browsers, maar je kunt gemakkelijk js-extensies gebruiken die dit voor oudere browsers mogelijk maken.

Antwoord 3, autoriteit 32%

Ik zou hier wel toe geneigd zijn, wat de verdienste heeft van IE8-ondersteuning.

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

JSFiddle

Antwoord 4, autoriteit 22%

Voeg een margintoe aan uw li-tags. Dat creëert ruimte tussen de lien je kunt line-heightgebruiken om de spatiëring in te stellen voor de tekst binnen de li-tags.

Antwoord 5, autoriteit 21%

Oude vraag, maar ik denk dat er geen antwoord op was. Ik zou een aangrenzende broers en zussen selector gebruiken. Op deze manier schrijven we slechts “één” regel CSS en houden we rekening met de ruimte aan het einde of begin, die de meeste antwoorden missen.

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

Antwoord 6, autoriteit 5%

Gebruik

. om op een hele lijst toe te passen

ul.space_list li { margin-bottom: 1em; }

Dan, in de html:

<ul class=space_list>
<li>A</li>
<li>B</li>
</ul>

Antwoord 7, autoriteit 3%

Vaak kunt u bij het maken van HTML-e-mailblasten geen stylesheets of stijl-/stijlblokken gebruiken. Alle CSS moet inline zijn. In het geval dat u de afstand tussen de opsommingstekens wilt aanpassen, gebruik ik li style=”margin-bottom:8px;” in elk bullet-item. Pas de pixelwaarde naar wens aan.

Antwoord 8, autoriteit 3%

u kunt ook de eigenschap line-height gebruiken op de ul

ul {
  line-height: 45px;
}

<ul>
<li>line one</li>
<li>line two</li>
<li>line three</li>
</ul>