web-dev-qa-db-fra.com

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

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

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

htmlcsshtml-lists
91
Brice Coustillas

Vous pouvez utiliser la marge. Voir l'exemple:

http://jsfiddle.net/LthgY/

li{
  margin: 10px 0;
}
98
user1633525

Je serais enclin à cela qui a les vertus du support IE8.

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

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

JSFiddle

31
Paulie_D

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 anciens navigateurs, mais vous pouvez facilement utiliser les extensions js, ce qui le permettra pour les anciens navigateurs.

31
user238801

Ajoutez une margin à vos balises li. Cela créera un espace entre li et vous pourrez utiliser line-height pour définir l'espacement du texte dans les balises li.

26
disinfor

la définition de padding-bottom pour chaque liste à l'aide de 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 police-famille, Taille de police, etc. jouent un rôle pour les hauteurs inégales.

0
Rishi jung

Souvent, lors de la génération d’explosions d’email HTML, vous ne pouvez pas utiliser de feuilles de style ni de blocs de 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 article de balle. Personnalisez la valeur en pixels à votre convenance.

0
Malcolm Stone