Résoudre la façon de résoudre l'écart entre l'étiquette IMG

Auteur：Eve Cole Date de mise à jour：2025-03-04 07:32:02

Dans le processus de développement habituel, nous devons souvent utiliser plusieurs images.

 <! Border-Bottom: 1Px Red solide;} UL {Border: 1Px Blue solide; Img src = liping.png> </li> </ul> </ body> </html>

Mais à ce moment-là, nous avons trouvé un problème, pourquoi y a-t-il une ligne supplémentaire sous ma photo?

Que se passe-t-il?

N'avais-je pas effacé la frontière extérieure et intérieure entre IMG?

En fait, c'est en fait un fantôme qui en ligne des éléments.

Tout élément visible qui n'est pas un élément de niveau de bloc est un élément associé interne, et la caractéristique de ses performances est la forme de disposition des lignes. ---- "CSS Guide faisant autorité"

Quelle est la signification?

Cela signifie qu'en fait, comme le texte d'image et d'autres éléments d'association interne, il est aligné avec sa base de base parent, mais vous êtes aligné sur la ligne de base.

Puisque nous connaissons la raison de ce problème, il est beaucoup plus simple de le résoudre.

1. La première solution

Puisque c'est l'élément en ligne, ce problème peut naturellement résoudre ce problème simplement et grossièrement, c'est-à-dire pour changer notre élément en personnalité personnalisée, peut-il être changé de la ligne à bloquer?

 <STYLE Type = : 0; marge: 0;} </ style>

2. La deuxième solution

C'est trop rugueux, le sexe est modifié, comment pouvons-nous jouer joyeusement, nous devons donc essayer la courbe pour le sauver.

 <STYLE TYPE = Texte / CSS> IMG {Hauteur: 200px; ;

On peut voir que cela peut également atteindre les résultats souhaités.

La raison en est que l'attribut par défaut de l'alignement vertical est la ligne de base.

3. La troisième solution

Mais la méthode d'alignement est modifiée, donc elle peut également causer des problèmes. Maintenant que vous n'êtes plus dans la documentation actuelle, vous ne serez naturellement pas aligné en référence à ce texte lorsque vous vous dispensez.

Nous pouvons utiliser des flottants.

 <Style Type = Text / CSS> IMG {Hauteur: 200px; Bleu; Style de la liste: Aucun;

Cela peut également résoudre ce problème, mais veuillez noter que bien que le flotteur soit bon, ne soyez pas gourmand.

Vous devez être en mesure de résoudre correctement l'impact du flottement, et si vous prévoyiez à l'origine pour faire l'effet de l'entourage de texte, l'utilisation de flottants doit être votre meilleur choix.

4. La quatrième solution

Si tous les schémas ci-dessus ne peuvent pas résoudre vos problèmes, seuls mon gros kill est sacrifié.

Vous pouvez donner à votre élément parent pour définir la taille du texte sur 0.

 <Style Type = Text / CSS> IMG {Hauteur: 200px; ;

Étant donné que vous êtes aligné selon la ligne de base du texte, je vais définir le texte directement, afin que vous ne puissiez pas le positionner, mais cette approche n'est recommandée que lorsque vous êtes pressé.

Résumer

Eh bien, ce qui précède est les quatre solutions de ce problème. Si vous avez des questions, vous pouvez laisser un message pour communiquer.