div 中的图像在图像下方有额外的空间

Question

为什么在 下面的代码 中 div 的高度大于 img 的高度？图像下方有一个间隙，但它似乎不是填充/边距。

图像下方的间隙或额外空间是什么？

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

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

原文由 Misha Moroshko 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

默认情况下，图像是内联渲染的，就像字母一样，所以它与 a、b、c 和 d 位于同一行。

该行 下方 有空间用于您在 g、j、p 和 q 等字母上找到的下行字母。

你可以：

• 调整图像的 vertical-align 以将其定位在其他位置（例如 middle ） 或
• 改变 display 所以它不是内联的。

 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>

---

包含的图像是公共领域， 来自 维基共享资源

原文由 Quentin 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

这篇 博 文中建议的另一个选项是将图像的样式设置为 style="display: block;"

原文由 Thea 发布，翻译遵循 CC BY-SA 4.0 许可协议