我对为什么 <input> 如此奇怪地对齐感到困惑 [重复]答案

【问题标题】：I'm confused about why <input> aligns so oddly [duplicate]我对为什么 <input> 如此奇怪地对齐感到困惑 [重复]
【发布时间】：2016-01-13 13:25:15
【问题描述】：

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

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

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

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

【问题讨论】：

标签： html css

【解决方案1】：

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

如果您想通过底部边缘对齐它们，请使用

vertical-align: bottom;

【讨论】：

【解决方案2】：

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

只需从这个 div 中删除 width:150px

【讨论】：