Image à l’intérieur de div a un espace supplémentaire sous l’image

Pourquoi dans le code suivant la hauteur de la div est plus grande que la hauteur de la img ? Il y a une lacune sous l’image, mais elle ne semble pas être un remplissage / une marge.

Quelle est l’écart ou l’espace supplémentaire sous l’image?

 #wrapper { border: 1px solid red; width:200px; } img { width:200px; } 
 

Image avec un espace vide ou blanc en dessous

Par défaut, une image est rendue en ligne, comme une lettre.

Il se trouve sur la même ligne que a, b, c et d.

Il y a de la place au-dessous de cette ligne pour les descendeurs que vous trouvez sur des lettres comme f, j, p et q.

Vous pouvez ajuster l’ vertical-align de l’image pour le positionner ailleurs (par exemple au middle ) ou modifier l’ display pour qu’il ne soit pas aligné.

Une autre option proposée ici est de définir le style de l’image comme style="display: block;"

Solution rapide:

Pour supprimer l’écart sous l’image , vous pouvez:

  • Définissez la propriété d’ alignement vertical de l’image sur vertical-align: bottom; vertical-align: top; ou vertical-align: middle;
  • Définissez la propriété d’affichage de l’image à display:block;

Voir le code suivant pour une démonstration en direct:

 #vAlign img { vertical-align :bottom; } #block img{ display:block; } div {border: 1px solid red;width:100px;} img {width:100px;} 
 

No fix:

With vertical-align:bottom; on image:

With display:block; on image:

On peut également annuler la hauteur de ligne du parent:

 #wrapper { line-height: 0; } 

Tous les correctifs: http://jsfiddle.net/FaPFv/

Tout ce que vous avez à faire est d’affecter cette propriété:

 img { display: block; } 

Les images par défaut ont cette propriété:

 img { display: inline; } 

Vous pouvez utiliser plusieurs méthodes pour ce problème comme

  1. Utilisation line-height

     #wrapper { line-height: 0px; } 
  2. Utilisation de l’ display: flex

     #wrapper { display: flex; } #wrapper { display: inline-flex; } 
  3. Utilisation de display: block , table , flex et inherit

     #wrapper img { display: block; } #wrapper img { display: table; } #wrapper img { display: flex; } #wrapper img { display: inherit; } 

J’ai trouvé que cela fonctionne très bien en utilisant display: block; sur l’image et vertical-align: top; sur le texte.

 .imagebox { width:200px; float:left; height:88px; position:relative; background-color: #999; } .container { width:600px; height:176px; background-color: #666; position:relative; overflow:hidden; } .text { color: #000; font-size: 11px; font-family: robotomeduim, sans-serif; vertical-align:top; } .imagebox img{ display:block;} 
 
Image title
Image title
Image title
Image title
Image title
Image title

J’ai utilisé line-height:0 et cela fonctionne très bien pour moi.

Je viens d’append du float:left pour div et ça a fonctionné