为什么img没有到达其包含div的底部？

Question

请注意，图像的底部没有到达下面的红色轮廓，这是包含div的底部。

这里发生了什么？无论如何，这都是违反直觉或不明显的。

我不是在寻找修复它的方法。这是一个组成的例子。我正在努力掌握我对css的理解。

* {
  margin: 0px;
  padding: 0px;
}
.frame {
  outline: 1px solid red;
  padding: 0px;
}
.frame img {
  /*border: 10px solid yellow;
  outline: 10px solid blue;*/
}

<div class="frame">
  <img src="http://lorempixel.com/200/300/city/200x300/" />
</div>

Answer 1

图像是内联元素，因此被视为文本。它们就像文本一样位于基线上，因此在它们下面有一个轻微的填充。这种差距是允许文本下降的。

要消除差距，请将vertical-align:bottom添加到图像的CSS中。

Answer 2

要摆脱这种情况，只需将此款式添加到<img>：

即可

    display: block

这将强制图像显示不是内联的，因此line-height之类的内容不适用于它。