Pourquoi les éléments de la liste de blocage en ligne ont-ils des marges indésirables dans Firefox et Chrome ?

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

Comme indiqué dans le code HTML et CSS donné, le phénomène d'apparition de marges indésirables autour des éléments en ligne -des éléments de liste de blocage ont été observés. Ce problème se produit uniquement dans les navigateurs comme Firefox et Chrome, entraînant un espace vide inexpliqué entre les éléments de la liste.

Le coupable réside dans l'affichage : inline-block ; propriété appliquée aux éléments de la liste. Ce paramètre traite les éléments comme des blocs individuels qui circulent dans le conteneur parent. Cependant, les éléments inline-block héritent des règles d'espacement des éléments inline, qui incluent un espacement par défaut entre eux.

Pour remédier à cette situation, envisagez de remplacer display: inline-block; avec flotteur : gauche ;. Ce commutateur permet aux éléments de la liste d'être alignés côte à côte sans aucune marge supplémentaire.

Vous pouvez également supprimer entièrement la marge en plaçant tous les éléments de la liste sur une seule ligne, par exemple :

<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 de contournement consiste à regrouper les balises HTML :

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

En employant ces techniques, vous pouvez éliminer efficacement les marges indésirables entourant la liste de blocage en ligne. articles.

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!