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

a un bloc en ligne
• , 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 */   
  }

  Copier après la connexion

  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>

  Copier après la connexion

  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;   
  }

  Copier après la connexion

  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>

  Copier après la connexion

  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!