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

Question

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

HTML:

<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>

CSS:

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

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

可以参考这个 JSFiddle：https://jsfiddle.net/9nLyr6f6/2/

我只是想知道这样做的逻辑是什么？适用什么规则？
如何更改它并使图像位于顶部？

Answer 1

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

见https://developer.mozilla.org/en-US/docs/Web/CSS/vertical-align

要更改它，请将图像上的垂直对齐方式属性设置为非默认值。

img{
    height: 2em;
    top: 0px;
    vertical-align:top;
}

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

<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>

Answer 2

图像和内部div都是inline-block元素，它们都对齐在文本的基线上。所以外面的div实际上包含一行'text'。该行不包含实际文本，而仅包含两个块：图像和内部 div。两者都在基线上对齐。

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

img{
    height: 2em;
    top: 0px;
    border: 1px solid green;
}

div {
    border: 1px solid blue;
}
div div {
    width: 5em;
    display: inline-block;
    border-width: 0px;
}

<div>
  A
  <img src="https://www.google.com/images/srpr/logo11w.png">
  B
  <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>
  Cxyz
</div>

您可以通过在图像中添加 vertical-align: top 来解决此问题：

img{
    height: 2em;
    top: 0px;
    vertical-align: top;
}

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

<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>

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

Why images are aligned to the bottom of a div?

html

layout

alignment