Das Bild innerhalb des Div hat zusätzlichen Platz unter dem Bild

Question

Warum ist die Höhe von div im folgenden Code größer als die Höhe von img? Es gibt eine Lücke unter dem Bild, aber es scheint kein Abstand/Rand zu sein.

Was ist die Lücke oder der zusätzliche Platz unter dem Bild?

#wrapper {
  Rand: 1 Pixel durchgehend rot;
  Breite:200px;
}
img {
  Breite:200px;
}

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

Answer 1

此中建议的另一个选项博客文章正在将图像的样式设置为style="display: block;"

Answer 2

默认情况下，图像以内联方式呈现，就像字母一样，因此它与 a、b、c 和 d 位于同一行。

该行下方有一个空格，用于存放在字母 g、j、 p 和 q。

你可以：

• 调整vertical-align图像的 将其放置在其他位置（例如中间）或
• 更改显示，使其不再内联。

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>