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

Question

Pourquoi la hauteur de div dans le code suivant est-elle supérieure à la hauteur de img ? Il y a un espace sous l'image, mais il ne semble pas s'agir d'un remplissage/marge.

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

#wrapper {
  bordure : 1px rouge uni ;
  largeur : 200 px ;
}
img {
  largeur : 200 px ;
}</pré>
<pre class="brush:html;toolbar:false;"><div id="wrapper">
  <img src="http://i.imgur.com/RECDV24.jpg" />
</div>

Answer 1

Une autre option suggérée dans ce article de blog consiste à styliser les images en style="display: block;"

Answer 2

Par défaut, l'image est rendue en ligne, tout comme les lettres, elle est donc sur la même ligne que a, b, c et d.

Il y a un espace sous la ligne pour les lettres g, j, p et q.

Vous pouvez :

• Ajuster vertical-align图像的 将其放置在其他位置（例如中间) ou
• Changez 显示 pour qu'il ne soit plus 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>