HTML/CSS - 无法从输入框中删除 'margin-top'

Question

我似乎无法弄清楚，也许我遗漏了什么，但这是我的 HTML:

<style type="text/css"> 
    #loginForm {
        margin: 0;
        padding: 0;
        outline: 0;
    }
</style>

<input id="loginForm" type='text' height="30px" width="20px" /><img id='usernameIcon' src="shipping3.png" width="30px" alt="username" height="30px"/>

基本上，我希望输入框和图像彼此相邻。输入框和图像的高度相同。我希望它们直接并排放置，但由于某种原因，输入框有某种顶部边距，使其明显低于图像。这是为什么？

我在 Chrome 和 IE 10 上对此进行了测试，在这两个平台上，输入框都有某种顶部边距。我知道我可以将它们与 float 正确对齐，但难道不应该有另一种方法来从输入框中删除“margin-top”吗？

Answer 1

您应该将输入的 vertical-align 设置为顶部。

input { 
    vertical-align: top;   
    margin: 0;
}

jsFiddle