img

Cet article vous apporte six solutions majeures au problème des espaces blancs en bas de l'image. Il a une certaine valeur de référence. Les amis dans le besoin peuvent s'y référer.

Parfois, nous ne définissons pas la valeur margin-bottom dans l'attribut margin de l'image (balise img), et un fond vide apparaîtra dans certains navigateurs. Ci-dessous, nous présentons plusieurs méthodes pour résoudre ce problème.

1. Définissez l'image comme élément de niveau bloc

Par exemple : img{display:block;}

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

Par exemple : img{vertical-align:top;} (La valeur de vartical-align est facultative, text-top, bottom, text-bottom, etc., selon sur la situation.)

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

Par exemple : l'objet parent de img est imgClass, puis ajoutez simplement un attribut font-size:0px à imgClass. Mais cela empêchera le texte de l'objet parent de s'afficher correctement. 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. Modifier les attributs de l'objet parent

Si la hauteur et la largeur de l'objet parent sont fixes et que la taille de l'image dépend de l'objet parent, vous pouvez définissez l'objet parent : overflow:hidden ;

5. Définissez l'attribut flottant de l'image

tel que : img{float:left;}

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

est un peu difficile à mettre en œuvre. Nous ajoutons souvent une indentation vide afin de créer l'image. la hiérarchie des codes de page est claire.

En général, si vous n'avez pas besoin de mélanger des images, la méthode 1) est meilleure, et la méthode 2) est également bonne si vous souhaitez mélanger des images et du texte, la méthode 5) sera meilleure, mais ; N'oubliez pas de vider les flotteurs. Bien entendu, la méthode à utiliser dépend de la situation spécifique et des préférences individuelles.

Ce qui précède est une introduction complète aux six solutions majeures au problème des espaces blancs en bas de l'img. Si vous souhaitez en savoir plus sur le Tutoriel HTML. , Veuillez prêter attention au site Web PHP chinois .

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!