我很困惑为什么<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;