Pourquoi y a-t-il des marges indésirables dans les éléments de ma liste de blocage en ligne ?

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

Dans un scénario où une mise en page HTML comprend une liste d'éléments de bloc en ligne, vous pouvez rencontrez des marges indésirables apparaissant autour des éléments de la liste. Pour résoudre ce problème, il est crucial d'en comprendre la cause et d'identifier la solution appropriée.

Cause de la marge :

Le problème survient en raison de l'utilisation de l'affichage : bloc en ligne sur les éléments de la liste. Les éléments de bloc en ligne créent intrinsèquement des espaces, ce qui entraîne une marge de 4 px à droite de chaque élément.

Solution 1 : Convertir en float : gauche ;

Changer simplement le propriété d'affichage à flotter : laissée pour les éléments de la liste éliminera la marge indésirable.

li {
    float: left;
    ...
}

Solution 2 : Concaténer les balises d'éléments de liste

Vous pouvez également supprimer les espaces en concaténant les balises d'éléments de liste sur un seul. ligne.

• first
• first
< ;li>
first
• first

Solution 3 : Éliminer les balises de blocage

Une autre option consiste à éliminer les balises de blocage dans les éléments de la liste, en garantissant que tout le contenu est rendu sur un seul ligne :

• first