Ajouter de l'espace entre les éléments <li>

Question

J'ai un menu de navigation sur lequel il semble que je ne peux pas ajouter un espace (margin: 3px;) entre les éléments

• .

  Vous pouvez voir le code HTML et CSS sur ce jsfiddle ou ci-dessous.

  Vous verrez que j'ai ajouté un border-bottom: 2px solid #fff; au #access li pour simuler l'espace entre les éléments, mais cela ne fonctionnera pas car sous le menu de navigation j'aurai une multitude de couleurs différentes. Si j'ajoute margin-button: 2px ça ne marche pas.

  Voici le HTML:

  Ceci est le CSS:

  #access {
      background: #0f84e8; /* Affiche une couleur unie pour les anciens navigateurs */
      display: block;
      margin: 0 auto 6px 55px;
      position: absolute;
      top: 100px;
      z-index: 9999;
  }
  #access ul {
      font-size: 13px;
      list-style: none;
      margin: 0 0 0 -0.8125em;
      padding-left: 0;
  }
  #access li {
      position: relative;
      padding-left: 11px;
  }
  #access a {
      border-bottom: 2px solid #fff;
      color: #eee;
      display: block;
      line-height: 3.333em;
      padding: 0 10px 0 20px;
      text-decoration: none;
  }
  
  #access li:hover > a,
  #access ul ul :hover > a,
  #access a:focus {
      background: #efefef;
  }
  #access li:hover > a,
  #access a:focus {
      background: #f9f9f9; /* Affiche une couleur unie pour les anciens navigateurs */
      background: -moz-linear-gradient(#f9f9f9, #e5e5e5);
      background: -o-linear-gradient(#f9f9f9, #e5e5e5);
      background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#f9f9f9), to(#e5e5e5)); /* Ancienne syntaxe webkit */
      background: -webkit-linear-gradient(#f9f9f9, #e5e5e5);
      color: #373737;
  }
  #access ul li:hover > ul {
      display: block;
  }

Answer 1

MISE À JOUR 2021

Ma réponse originale date de 2012, alors que bon nombre des sélecteurs CSS de Niveau 3 n'existaient pas. Pour y parvenir, nous aurions besoin de JS ou d'autres styles/classes CSS explicites pour y parvenir. Comme l'a souligné @AlphaX, la meilleure solution maintenant est simplement

li.menu-item:not(:last-child) { 
   margin-bottom: 3px;  
}

ANCIENNE RÉPONSE

ajouter :

margin: 0 0 3px 0;

à votre #access li et déplacez

background: #0f84e8; /* Affiche une couleur unie pour les anciens navigateurs */

à #access a et retirez le border-bottom. Ensuite ça fonctionnera

Ici : http://jsfiddle.net/bpmKW/4/

Answer 2

Vous pouvez utiliser la propriété margin :

li.menu-item {
   margin:0 0 10px 0;   
}

Demo: http://jsfiddle.net/UAXyd/

Answer 3

Il existe une fonctionnalité puissante de flex qui permet de spécifier l'espace entre chaque enfant sans avoir besoin de faire référence au "dernier enfant" à travers gap. Je me retrouve à l'utiliser plus souvent que marge à ce stade :

ul {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

Exemple

li {
  background: red;
}

ul {
  background: silver;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

  Item 1
  Item 2
  Item 3
  Item 4
  Item 5

Answer 4

Étant donné que vous demandez un espace entre, j'ajouterais une substitution au dernier élément pour éliminer la marge supplémentaire là-bas:

li {
  background: red;
  margin-bottom: 40px;
}

li:last-child {
 margin-bottom: 0px;
}

ul {
  background: silver;
  padding: 1px;  
  padding-left: 40px;
}

Élément 1
Élément 1
Élément 1
Élément 1
Élément 1

Le résultat peut ne pas être toujours visuel en raison de la collapsion des marges et autres... Dans les exemples inclus, j'ai ajouté un petit padding de 1px à l'élément ul pour prévenir la collapsion. Essayez de supprimer la règle li:last-child, et vous verrez que le dernier élément étend maintenant la taille de l'élément ul.

Answer 5

La plupart des réponses ici ne sont pas correctes car elles ajouteraient également de l'espace en bas du dernier

• , donc elles n'ajoutent pas d'espace SEULEMENT entre les

• !

  La solution la plus précise et efficace est la suivante :

  li.menu-item:not(:last-child) { 
     margin-bottom: 3px;  
  }

  Explication: en utilisant :not(:last-child), le style sera appliqué à tous les éléments (li.menu-item) sauf le dernier.