Comment gérer les lacunes sous les images CSS

Cette fois, je vais vous expliquer comment gérer les lacunes sous les images CSS, quelles sont les notes lors du traitement des lacunes sous les images CSS, ce qui suit est un cas pratique, voyons jetez un oeil.

Lors de la composition p+CSS sur la page, il est tout à fait courant de rencontrer le problème d'espace blanc excessif sous l'élément image img dans IE6 (bien sûr, parfois sous Firefox). absolument courante. La méthode consiste également à "jouer à l'oreille", et différentes solutions doivent être utilisées en fonction des raisons. Ici, nous résumons directement les méthodes courantes pour résoudre le BUG des lacunes supplémentaires sous la mise en page de l'image pour votre référence.

1. Convertissez l'image en un objet de niveau bloc

C'est-à-dire, définissez img sur :

affichage : block;

Ajoutez un ensemble de codes CSS dans cet exemple : #sub img {display:block;}

Invalide pour IE6/7

2. de l'image

Ce problème peut également être résolu en définissant l'attribut vertical-align de l'image sur "top, text-top, bottom, text-bottom" . Par exemple, dans cet exemple, ajoutez un ensemble de codes CSS : #sub img {vertical-align:top;}

3. Définissez la taille du texte de l'objet parent sur 0px

C'est-à-dire, ajoutez une ligne dans #sub. : font-size :0;

peut résoudre le problème. Mais cela a également provoqué un nouveau problème : le texte de l'objet parent ne peut pas être affiché. Même si la partie texte est entourée d'un sous-objet, elle peut toujours être affichée en définissant la taille du texte du sous-objet, mais un message d'erreur indiquant que le texte est trop petit sera affiché lors de la validation CSS.

4. Modifiez les propriétés de l'objet parent

Si la largeur et la hauteur de l'objet parent sont fixes et que la taille de l'image dépend sur l'objet parent, alors vous pouvez définir : overflow:hidden pour résoudre ce problème.

Comme dans cet exemple, vous pouvez ajouter le code suivant à #sub : width:88px;height:31px;overflow:hidden;

5 Définir l'attribut flottant de l'image

Dans ce cas, ajoutez une ligne de code CSS :

#sub img {float:left;}

Si vous souhaitez obtenir une disposition mixte d'images et de texte, cette méthode est une bonne choix.

6. Annulez l'espace entre la balise d'image et la dernière balise de fermeture de son objet parent.

Il convient de souligner que cette méthode peut causer des problèmes dans le développement réel, car lors de l'écriture du code, afin de rendre le code plus sémantique et plus clair, il est inévitable de fournir le code via l'affichage IDE Indent, qui entraînera inévitablement l'affichage d'étiquettes et d'autres étiquettes sur de nouvelles lignes, comme la commande "Appliquer le format source" de DW. Par conséquent, cette méthode peut nous aider à comprendre une situation dans laquelle un BUG se produit. La solution spécifique doit être résolue par tout le monde.

Je pense que vous maîtrisez la méthode après avoir lu le cas dans cet article. Pour des informations plus intéressantes, veuillez prêter attention aux autres articles connexes sur le site Web chinois de php. !

Lecture recommandée :

Utiliser entièrement CSS pour centrer les éléments

Explication détaillée de l'utilisation des pseudo-éléments : avant et :: après

Comment l'attribut font-size-adjust optimise la mise en page des pages Web

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!