L'image à l'intérieur du div a un espace supplémentaire sous l'image

Pourquoi dans le code suivant la hauteur du divest plus grande que la hauteur du img? Il y a un espace sous l'image, mais il ne semble pas y avoir de remplissage / marge.

Quel est l'espace ou l'espace supplémentaire sous l'image?

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

<div id="wrapper">
  <img src="http://i.imgur.com/RECDV24.jpg" />
</div>

Par défaut, une image est rendue en ligne, comme une lettre, de sorte qu'elle se trouve sur la même ligne que a, b, c et d.

Il y a un espace sous cette ligne pour les descendants que vous trouvez sur des lettres comme g, j, p et q.

Vous pouvez:

• ajustez l' vertical-alignimage pour la positionner ailleurs (par exemple le middle) ou
• changez le displayafin qu'il ne soit pas en ligne.

div {
  border: solid black 1px;
  margin-bottom: 10px;
}

#align-middle img {
  vertical-align: middle;
}

#align-base img {
  vertical-align: bottom;
}

#display img {
  display: block;
}

<div id="default">
<h1>Default</h1>
  The quick brown fox jumps over the lazy dog <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/f/f2/VangoghStarry-night2.jpg/300px-VangoghStarry-night2.jpg" alt="">
</div>

<div id="align-middle">
<h1>vertical-align: middle</h1>
  The quick brown fox jumps over the lazy dog <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/f/f2/VangoghStarry-night2.jpg/300px-VangoghStarry-night2.jpg" alt=""> </div>
  
  <div id="align-base">
<h1>vertical-align: bottom</h1>
  The quick brown fox jumps over the lazy dog <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/f/f2/VangoghStarry-night2.jpg/300px-VangoghStarry-night2.jpg" alt=""> </div>

<div id="display">
<h1>display: block</h1>
  The quick brown fox jumps over the lazy dog <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/f/f2/VangoghStarry-night2.jpg/300px-VangoghStarry-night2.jpg" alt="">
</div>

L'image incluse est du domaine public et provient de Wikimedia Commons

Une autre option suggérée ici consiste à définir le style de l'image commestyle="display: block;"

Solution rapide:

Pour supprimer l'espace sous l'image , vous pouvez:

• Définissez la propriété d' alignement vertical de l'image sur vertical-align: bottom; vertical-align: top;ouvertical-align: middle;
• Définissez la propriété d'affichage de l'image sur 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;}

<p>No fix:</p>
<div><img src="http://i.imgur.com/RECDV24.jpg" /></div>

<p>With vertical-align:bottom; on image:</p>
<div id="vAlign"><img src="http://i.imgur.com/RECDV24.jpg" /></div>

<p>With display:block; on image:</p>
<div id="block"><img src="http://i.imgur.com/RECDV24.jpg" /></div>

Explication: pourquoi y a-t-il un espace sous l'image?

L'écart ou l'espace supplémentaire sous l'image n'est pas un bug ou un problème, c'est le comportement par défaut. La cause première est que les images sont des éléments remplacés ( voir Éléments remplacés MDN ). Cela leur permet "d'agir comme une image" et d'avoir leurs propres dimensions intrinsèques, rapport hauteur / largeur ....
Les navigateurs calculent leur propriété d'affichage inlinemais ils leur donnent un comportement spécial qui les rapproche des inline-blockéléments (comme vous pouvez les aligner verticalement, donner leur une hauteur, marge haut / bas et rembourrage, transforme ...).

Cela signifie également que:

<img>n'a pas de ligne de base, donc lorsque les images sont utilisées dans un contexte de mise en forme en ligne avec alignement vertical: ligne de base, le bas de l'image sera placé sur la ligne de base du texte.
( source: MDN , c'est moi qui souligne )

Comme les navigateurs calculent par défaut la propriété d'alignement vertical sur la ligne de base, il s'agit du comportement par défaut. L'image suivante montre l'emplacement de la ligne de base sur le texte:

( Source de l'image )

Les éléments alignés sur la ligne de base doivent garder de l'espace pour les descendants qui s'étendent sous la ligne de base (comme j, p, g ...) comme vous pouvez le voir dans l'image ci-dessus. Dans cette configuration, le bas de l'image est aligné sur la ligne de base comme vous pouvez le voir dans cet exemple:

div{border:1px solid red;font-size:30px;}
img{width:100px;height:auto;}

<div>
  <img src="http://i.imgur.com/RECDV24.jpg" />jpq are letters with descender
</div>

C'est pourquoi le comportement par défaut de la <img>balise crée un espace au bas de son conteneur et pourquoi la modification de la propriété d'alignement vertical ou de la propriété d'affichage le supprime comme dans la démo suivante:

div {width: 100px;border: 1px solid red;}
img {width: 100px;height: auto;}

.block img{
  display:block;
}
.bottom img{
  vertical-align:bottom;
}

<p>Default:</p>
<div>
  <img src="http://i.imgur.com/RECDV24.jpg" />
</div>
<p>With display:block;</p>
<div class="block">
  <img src="http://i.imgur.com/RECDV24.jpg" />
</div>
<p>With vertical-align:bottom;</p>
<div class="bottom">
  <img src="http://i.imgur.com/RECDV24.jpg" />
</div>

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

#wrapper {
  line-height: 0;
}

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

Il vous suffit d'attribuer 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. En utilisant line-height

   #wrapper {  line-height: 0px;  }

2. En utilisant display: flex

   #wrapper {  display: flex;         }
   #wrapper {  display: inline-flex;  }

3. En utilisant display: block, table, flexetinherit

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

J'ai utilisé line-height:0et cela fonctionne bien pour moi.

J'ai trouvé que cela fonctionne très bien en utilisant display: block; sur l'image et alignement vertical: haut; 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;}

<div class="container">
    <div class="imagebox">
        <img src="http://machdiamonds.com/n69xvs.jpg" /> <span class="text">Image title</span>
    </div>
    <div class="imagebox">
        <img src="http://machdiamonds.com/n69xvs.jpg" /> <span class="text">Image title</span>
    </div>
    <div class="imagebox">
        <img src="http://machdiamonds.com/n69xvs.jpg" /> <span class="text">Image title</span>
    </div>
    <div class="imagebox">
        <img src="http://machdiamonds.com/n69xvs.jpg" /> <span class="text">Image title</span>
    </div>
    <div class="imagebox">
        <img src="http://machdiamonds.com/n69xvs.jpg" /> <span class="text">Image title</span>
    </div>
    <div class="imagebox">
        <img src="http://machdiamonds.com/n69xvs.jpg" /> <span class="text">Image title</span>
    </div>
</div>

ou vous pouvez modifier le code d'un JS FIDDLE

Je viens d'ajouter float:leftà div et cela a fonctionné