我很困惑为什么<input />如此奇怪地对齐

Question

我在这里有一个jsfiddle：https://jsfiddle.net/kwende/w853pkv1/

我很困惑为什么事情会以他们的方式呈现。请注意输入标签位于图像下方（在Chrome中）的位置。特别是，这个块：

<div style="width:150px;height:100%;display:inline-block;padding-top:15px;">
    <input type="submit" value="Blah" />
</div>

这是我在我个人项目中遇到的一个淡化的例子，但它基本上捕捉到了正在发生的事情。如果你用一个img标签替换输入标签，那么它就像我期望的那样对齐。

我想我误解了一些基本概念。有人可以教我为什么输入标签位于图像标签下方？

Answer 1

这是因为默认情况下，内联元素按其基线对齐。

如果要根据底边对齐它们，请使用

vertical-align: bottom;

Answer 2

<div style="height:100%;display:inline-block;padding-top:15px;">
            <input type="submit" value="Blah" />
</div>

只需从此div中删除 width：150px