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

Simple et rapide. Il suffit de mettre du CSS dans l'élément ul (la propriété 'gap' définit l'espace entre les éléments li) :

display: flex;
align-items: flex-start;
flex-direction: column;
gap: 40px;

Answer 2

Vous pouvez utiliser la disposition en grille et sa propriété de gap. Vous économisez une ligne supplémentaire de CSS avec la grille par rapport à flex.

ul {
  display: grid;
  gap: 1em;
}

Exécutez le snippet de code ci-dessous et essayez-le!

/* base */

ul {
  background: gray;
  list-style: none;
  padding: 1em;
}

li {
  background: green;
  text-align: center;
  padding: 1em;
}

/* UL Gap Adjustment */

ul {
  display: grid;
  gap: 1em;
}

  item 1
  item 2
  item 3

Answer 3

#access a {
    border-bottom: 2px solid #fff;
    color: #eee;
    display: block;
    line-height: 3.333em;
    padding: 0 10px 0 20px;
    text-decoration: none;
}

Je vois que vous avez utilisé line-height mais vous l'avez donné à la balise au lieu de

Essayez ceci:

#access ul {line-height:3.333em;}

Vous n'aurez pas besoin de jouer avec les marges ensuite.

Answer 4

Je veux juste dire les gars:

Ne jouez qu'avec la marge

Il est beaucoup plus facile d'ajouter de l'espace entre

• si vous jouez avec la marge.