Comment supprimer les espaces Inline-Block en HTML

Cet article présente principalement en détail 5 façons de supprimer rapidement Inline-Block en HTML. Les amis intéressés peuvent se référer à

Lorsque vous avez besoin de contrôler la marge sur l'élément "inline" et le remplissage, le inline-block. La valeur de l'attribut devient très utile. Avec elle, vous n'avez plus besoin de faire en sorte que ces éléments soient "bloqués" et "flottants". 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 se trouve dans votre code HTML. Ne laissez pas de blanc espace entre les éléments :

<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 pratique, intuitif et surtout... fiable.

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

La meilleure solution à ce problème d'espace blanc est de Définissez font-size: 0 sur l'élément parent de ces éléments de bloc en ligne. Si votre 64349c75da2f924823fe3c3e91a71ff3 a un bloc en ligne 8c0e9d2c5e6a7ea41578d97b4d80f7d8, 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'éviter que la taille de la police de l'élément parent n'affecte l'élément enfant, vous devez pour redéfinir la valeur de la taille de la police sur l'élément, 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

Très similaire à la méthode 2 , désolé. Vous pouvez profiter de la flexibilité des inline-block et leur donner une marge négative pour masquer l'espace blanc :

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

Cette méthode est la moins recommandée car vous devez prendre en compte diverses situations qui surviennent parfois. des lacunes imprévues. Il est préférable de ne pas utiliser cette astuce.

Méthode 5 : Suivre le début et la fin

Une autre façon d'utiliser les balises HTML est de placer la balise fermante d'un élément à proximité de la balise d'ouverture de l'élément suivant. Together:

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

n'est pas aussi moche 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'étude de chacun. Pour plus de contenu connexe, veuillez faire attention au site Web PHP chinois !

Recommandations associées :

Analyse de code express à l'aide de modèles HTML

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!