Html 为什么图像与div的底部对齐？

在以下示例中，图像与父容器的底部对齐：

HTML:

可以使用此JSFIDLE作为参考：

我只是想知道这其中的逻辑是什么？什么规则适用

如何更改它并将图像置于顶部

---

因为内联元素的默认垂直对齐是基线

看

若要更改它，请将图像上的“垂直对齐”属性设置为其默认值以外的其他值

img{
高度：2米；
顶部：0px；
垂直对齐：顶部；
}
div div{
宽度：5em；
显示：内联块；
}

A B C D E F G H I J K L M N O P Q R S T U V W X Y Z

图像和内部div都是

内联块

元素，它们在文本的基线上对齐。因此，外部div实际上包含一行“text”。此行不包含实际文本，但仅包含两个块：图像和内部div。它们都在基线上对齐

您可以看到这一点，特别是如果添加一些文本和边框。图像与文本的基线对齐

img{
高度：2米；
顶部：0px；
边框：1px纯绿色；
}
div{
边框：1px纯蓝色；
}
div div{
宽度：5em；
显示：内联块；
边框宽度：0px；
}

A.
B
A B C D E F G H I J K L M N O P Q R S T U V W X Y Z
Cxyz

<div>
  <img src="https://www.google.com/images/srpr/logo11w.png">
  <div>A B C D E F G H I J K L M N O P Q R S T U V W X Y Z</div>
</div>

img{
    height: 2em;
    top: 0px;
}

div div {
    width: 5em;
    display: inline-block;
}