Pourquoi les éléments de ma liste de blocage en ligne ont-ils des marges indésirables ?

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

Problème :
Vous avez des éléments de liste de blocage en ligne qui présentent inexplicablement une marge d'environ eux, malgré la définition de la marge à 0 dans votre CSS règles.

Cause :
Le problème provient de l'utilisation de display: inline-block; pour les éléments de la liste. Les éléments de bloc en ligne sont sensibles aux espaces et introduisent une marge de 4 px à droite de chaque élément.

Solution 1 : float: left;
Pour éliminer la marge, modifiez l'affichage propriété à flotter : gauche ;. Cela supprime l'espacement introduit par inline-block.

Solution 2 : empêcher les espaces
Vous pouvez également empêcher les espaces d'affecter les éléments du bloc en ligne en supprimant tous les espaces entre la liste. balises d'élément, comme indiqué ci-dessous :

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

Une autre solution : bloquer la fin et le début Balises
Vous pouvez également bloquer les balises de fin et de début ensemble, forçant les éléments de la liste à être traités comme une seule ligne continue :

<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!