Css 为什么'；img是否到达其包含div的底部？

请注意，图像的底部没有到达其下方的红色轮廓，即包含div的底部

这是怎么回事？这是违反直觉的，或者对我来说并不明显

我不想找麻烦来解决它。这是一个虚构的例子。我正在努力掌握我对css的理解

*{
边际：0px；
填充：0px；
}
.框架{
轮廓：1px纯红；
填充：0px；
}
.帧img{
/*边框：10px实心黄色；
外形：10px纯蓝*/
}

---

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

---

要消除间隙，请将

垂直对齐：底部
添加到图像的CSS中
 图像是内联元素，因此被视为文本。它们位于基线上，就像文本一样，因此它们下面有一个轻微的填充。这种差距是为了允许文本的下一代

要消除间隙，请将
垂直对齐：底部
添加到图像的CSS中
 为了摆脱这种情况，只需将此样式添加到您的
：

这将强制图像显示不内联，因此像
行高这样的内容将不适用于图像。
为了消除此问题，只需将此样式添加到您的
：

这将强制图像显示不内联，因此像
行高
之类的内容将不适用于它。
Wow！这就是我所说的反直觉！谢谢兄弟！投票赞成好的解释。所以，如果可以的话，让我问你一个后续问题。为什么我要像对待文本一样对待图像？如果有一个页面的url以这种方式使用它，或者web开发人员称之为这种技术，如果这有任何意义的话？@toddmo您应该将其视为一个内联元素，而不是文本，尽管我这样说是因为文本也是内联的。技术上不正确，因为文本包含在一个行框中，但现在我将变得过于冗长和宽泛。为了解释，你应该阅读规范本身：哇！这就是我所说的反直觉！谢谢兄弟！投票赞成好的解释。所以，如果可以的话，让我问你一个后续问题。为什么我要像对待文本一样对待图像？如果有一个页面的url以这种方式使用它，或者web开发人员称之为这种技术，如果这有任何意义的话？@toddmo您应该将其视为一个内联元素，而不是文本，尽管我这样说是因为文本也是内联的。技术上不正确，因为文本包含在一个行框中，但现在我将变得过于冗长和宽泛。作为解释，您应该阅读规范本身：您能想到我不想在
img
上使用
display:block
的任何原因吗？我看不出让一个
内联
有什么意义。谢谢。让
内联
图标可能很有用，通常它跟在一些文本后面。你能想出我不想在
img
上使用
显示：块
的任何原因吗？我看不出让一个
内联
有什么意义。谢谢。让
内联
的图标可能很有用，通常它跟在一些文本后面
    display: block