6 façons de résoudre les lacunes sous les images CSS

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 dans Firefox. La solution à ce problème est également " "). Agir selon les circonstances", différentes solutions doivent être utilisées selon différentes raisons. Nous résumons ici directement les méthodes courantes pour résoudre le BUG des espaces excessifs sous la mise en page de l'image. Cet article présente principalement 6 solutions aux espaces sous les images CSS. Amis dans besoin de pouvoir s'y référer, j'espère que cela pourra aider tout le monde.

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

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

display: block

Ajouter un groupe ; dans cet exemple de code CSS : #sub img {display:block;}

Invalide pour IE6/7

2 Définissez l'alignement vertical de l'image

c'est-à-dire, définir l'attribut d'alignement vertical de l'image "haut, texte en haut, bas, texte en bas" peut également être résolu. 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

That. c'est-à-dire, ajoutez-le dans #sub Une ligne : 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 attributs 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 de l'objet parent, vous pouvez définir : overflow:hidden; pour résoudre le problème.

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

Définir l'attribut flottant de l'image

Autrement dit, ajoutez une ligne de code CSS dans cet exemple : #sub img {float:left;}

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

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

Cette méthode doit être soulignée. Dans le développement réel, cette méthode peut causer des problèmes, car afin de rendre le code plus sémantique et plus clair lors de l'écriture du code, il est inévitable de fournir un affichage de l'indentation du code via l'IDE, ce qui est inévitable Cela entraînera l'affichage de l'étiquette et d'autres étiquettes dans 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.

Recommandations associées :

Comment résoudre l'écart entre le haut et le bas de la balise img

Il existe un écart entre les images div+css ie6 Problème_html/css_WEB-ITnose

Notes d'étude CSS - résoudre l'écart entre l'image img et l'élément parent div_html/css_WEB-ITnose

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!