Pourquoi les éléments de la liste de blocage en ligne ont-ils des marges indésirables et comment puis-je les corriger ?

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

Lors de l'affichage d'éléments de blocage en ligne dans une liste, les utilisateurs peuvent rencontrer une marge indésirable qui entoure les éléments. Malgré la définition explicite de la marge sur 0, les éléments présentent toujours un espacement.

Ce problème survient en raison de la nature des éléments de bloc en ligne. Les éléments de bloc en ligne conservent les caractères d'espacement, y compris ceux entre et autour des éléments. Il en résulte une marge de 4 px à droite de chaque élément.

Solution

Pour éliminer la marge indésirable, les utilisateurs ont deux options :

1. Modifiez la propriété d'affichage :

   Convertissez la propriété d'affichage à partir du bloc en ligne flotter : à gauche. Cette méthode supprimera les marges liées aux espaces.

2. Concaténer les balises d'élément :

   Bloquer ensemble les balises de fin et de début des éléments de la liste. . Cette approche supprime les caractères d'espacement qui provoquent la marge.

Exemple

Considérez le code HTML et CSS suivant :

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

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;
}

En changeant la propriété display en float: left, la marge indésirable est supprimé :

li {
  display: float: left;
  ...
}

Alternativement, la concaténation des balises supprime les caractères d'espacement :

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

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!