5 façons de supprimer rapidement les espaces Inline-Block en HTML

Lorsque vous avez besoin de contrôler la marge et le remplissage des éléments "inline", la valeur de l'attribut inline-block devient très utile. Avec elle, vous n'avez plus besoin de rendre ces éléments "block" et "float". Mais il y a un problème : lors de l'utilisation du bloc en ligne, l'espace blanc entre les éléments HTML apparaîtra sur la page. Très ennuyeux. Il existe plusieurs façons de supprimer ces espaces blancs ; l’une d’elles est assez astucieuse.

Méthode 1 : Ne laissez aucun espace blanc entre les éléments

Une solution à 100 % à ce problème consiste à ne laisser aucun espace blanc entre les éléments dans votre code HTML :

<ul>   
  
<li>Item content</li>   
  
<li>Item content</li>   
  
<li>Item content</li>   
  
</ul>

Bien sûr, cela semble compliqué et rend le code difficile à maintenir, mais c'est très pratique, très intuitif et surtout... très fiable.

Méthode 2 : Définir la taille de police : 0 sur l'élément parent

La meilleure solution à ce problème d'espace blanc est de définir la taille de police : 0 sur l'élément parent de ces blocs en ligne éléments. Si vous avez un bloc en ligne

dans votre

, alors vous pouvez faire ceci :

.inline-block-list { /* ul or ol with this class */   
 font-size: 0;   
}   
  
.inline-block-list li {   
 font-size: 14px; /* put the font-size back */   
}

Afin d'empêcher la taille de la police de l'élément parent. Pour ne pas affecter les éléments enfants, vous devez redéfinir la valeur de la taille de la police sur l'élément enfant, ce qui est généralement simple. Le seul cas où vous pourriez rencontrer des problèmes est si vous définissez la police avec une taille relative. Mais la plupart du temps, cette méthode résoudra votre problème.

Méthode 3 : Commentaires HTML

Cette méthode est un peu violente, mais elle peut quand même fonctionner. Remplir les espaces entre les éléments HTML avec des commentaires a le même effet que s'il n'y avait pas d'espace entre eux :

<ul>  
 <li>Item content</li><!--  
 --><li>Item content</li><!--  
 --><li>Item content</li>  
</ul>

En un mot... dégoûtant. En deux mots... très dégoûtant. En trois mots… OK, vous comprenez. Mais ça marche !

Méthode 4 : Marges négatives

C'est très similaire à la méthode 2, désolé. Vous pouvez profiter de la flexibilité des blocs en ligne et leur donner une marge négative pour masquer les espaces :

.inline-block-list li {   
 margin-left: -4px;   
}

Cette méthode est la moins recommandée car vous devez considérer divers Parfois, il y a il y aura des lacunes imprévues. Il est préférable de ne pas utiliser cette astuce.

Méthode 5 : Tête-bêche

Une autre façon d'utiliser les balises HTML est de rapprocher la balise fermante d'un élément et la balise ouvrante de l'élément suivant :

<ul>  
 <li>Item content</li  
 ><li>Item content</li  
 ><li>Item content</li>  
</ul>

n'est pas aussi laid que les commentaires HTML, mais je préfère supprimer ces espaces à la main, quelle que soit la lisibilité du code.

Aucune méthode n'est idéale, mais ne laisser aucun espace blanc dans la page est aussi une mauvaise méthode. Ceci n'est pas un avertissement contre l'utilisation de blocs en ligne. Les blocs en ligne sont toujours très utiles, mais il vous suffit de comprendre comment gérer les espaces qui y apparaissent.

Ce qui précède représente l'intégralité du contenu de cet article. J'espère qu'il sera utile à l'apprentissage de chacun. J'espère également que tout le monde soutiendra le site Web PHP chinois.

Pour plus de 5 façons de supprimer rapidement l'espace vide d'Inline-Block en HTML, veuillez faire attention au site Web PHP chinois pour les articles connexes !