Pourquoi les éléments de ma liste de blocage en ligne ont-ils des marges indésirables même avec « marge : 0 » ?

Marge indésirable dans les éléments de liste de blocage en ligne

Problème

Je rencontre un problème où les éléments de liste configurés pour s'afficher : en ligne- bloc ont une marge indésirable autour d'eux, même si la règle CSS pour la marge est définie sur 0.

HTML :

<ul>
  <li><div>first</div></li>
  <li><div>first</div></li>
  <li><div>first</div></li>
  <li><div>first</div></li>
</ul>

CSS :

ul {
  padding: 0;
  border: solid 1px #000;
}
li {
  display: inline-block;
  padding: 10px;
  width: 114px;
  border: solid 1px #f00;
  margin: 0;
}
li div {
  background-color: #000;
  width: 114px;
  height: 114px;
  color: #fff;
  font-size: 18px;
}

Solution

Ce problème est causé par la propriété display: inline-block. Voici deux solutions :

1. Changer l'affichage : inline-block en float : left :

   • CSS :

     li {
       float: left;
     }

2. Supprimer espaces entre les éléments de la liste :

   • Supprimez les nouvelles lignes entre les caractères

   • balises et bloquez les balises de fin et les balises de début ensemble :

     • HTML :

       <ul>
         <li><div>first</div></li><li><div>first</div></li><li><div>first</div></li><li><div>first</div></li>
       </ul>

Remarque :

inline-block affiche une marge de 4 px à droite de chaque élément. Pour éviter cela, il est recommandé d'utiliser float ou d'éviter les espaces entre les éléments de la liste.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!