Comment définir l'espace vertical entre les éléments d'une liste ?

Question

Dans un délai de <ul> il est clair que l'espacement vertical entre les lignes peut être formaté à l'aide de l'attribut line-height.

Ma question est la suivante : dans le cadre d'une <ul> Comment définir l'espacement vertical entre les éléments de la liste ?

Answer 1

Vous pouvez utiliser la marge. Voir l'exemple :

http://jsfiddle.net/LthgY/

li{
  margin: 10px 0;
}

Answer 2

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 : Si vous n'utilisez pas le cas spécial pour le dernier élément li, votre liste aura un petit espacement après, ce que vous pouvez voir ici : http://jsfiddle.net/wQYw7/

Comparez maintenant cette solution à la mienne : http://jsfiddle.net/wQYw7/1/

Bien sûr, cela ne fonctionne pas dans les anciens navigateurs, mais vous pouvez facilement utiliser des extensions js qui activeront cette fonction pour les anciens navigateurs.

Answer 3

Vieille question, mais je pense qu'il manquait une réponse. J'utiliserais un sélecteur de fratrie adjacente. De cette façon, nous n'écrivons qu'une seule ligne de CSS et nous prenons en considération l'espace à la fin ou au début, ce que la plupart des réponses ne font pas.

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

Answer 4

Je pencherais plutôt pour celui-ci, qui a le mérite de prendre en charge IE8.

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

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

JSFiddle

Answer 5

Ajouter un margin à votre li étiquettes. Cela créera un espace entre les balises li et vous pouvez utiliser line-height pour définir l'espacement du texte à l'intérieur de la section li étiquettes.