Comment définir un espace vertical entre les éléments de la liste?

Dans un <ul>élément, il est clair que l'espacement vertical entre les lignes peut être formaté avec l'attribut line-height.

Ma question est, dans un <ul>élément, comment définir l'espacement vertical entre les éléments de la liste?

Vous pouvez utiliser la marge. Voir l'exemple:

http://jsfiddle.net/LthgY/

li{
  margin: 10px 0;
}

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 ensuite un petit espacement que vous pouvez voir ici: http://jsfiddle.net/wQYw7/

Maintenant, comparez cela avec ma solution: http://jsfiddle.net/wQYw7/1/

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

Je serais enclin à ce qui a la vertu du support IE8.

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

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

JSFiddle

Ajoutez un marginà vos libalises. Cela créera un espace entre le liet que vous pourrez utiliser line-heightpour définir l'espacement du texte dans les libalises.

Plusieurs fois, lors de la production de messages électroniques HTML, vous ne pouvez pas utiliser de feuilles de style ou de blocs de style / style. Tous les CSS doivent être en ligne. Dans le cas où vous souhaitez ajuster l'espacement entre les puces, j'utilise li style = "margin-bottom: 8px;" dans chaque élément de puce. Personnalisez la valeur des pixels à votre guise.

Pour appliquer à une liste entière, utilisez

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

Ensuite, dans le html:

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

définir padding-bottom pour chaque liste en utilisant une pseudo-classe est une méthode viable. La hauteur de ligne peut également être utilisée. N'oubliez pas que les propriétés de police telles que font-family, Font-weight, etc. jouent un rôle pour les hauteurs inégales.

<br>entre les <li></li>entrées de ligne semble fonctionner parfaitement bien dans tous les navigateurs Web que j'ai essayés, mais il ne parvient pas à passer le vérificateur W3C CSS3 en ligne. Cela me donne précisément l'espacement des lignes que je recherche. En ce qui me concerne, comme cela fonctionne sans aucun doute, je persiste à l'utiliser, quoi qu'en dise le W3C, jusqu'à ce que quelqu'un puisse trouver une bonne alternative juridique.