css – 输入向下移动1px

我正在尝试使我的按钮在应用于< a>时正确显示.或< input> (至少在铬).然而,输入向下移动1px但我真的不知道为什么.

我试图覆盖来自浏览器的所有样式,但它不起作用.

我知道我可以通过位置相对或其他东西来提升它,但这不是我正在寻找的解决方案,我想知道1px来自哪里.

HTML：

<a class="button" href="#">link button</a>
<input class="button" value="input button" type="button" />

CSS：

.button {
    display: inline-block;
    text-align: center;
    margin: 0 0 24px 0;
    border: 1px solid #000;
    padding: .3em .6em;
    background: #ccc;
    color: #000;
    -webkit-Box-sizing: border-Box;
    -moz-Box-sizing: border-Box;
    Box-sizing: border-Box;
    cursor: pointer;
    font-size: 16px;
    font-family: inherit;
    line-height: 1;
}

在这里演示：http://codepen.io/wfmarc/pen/uHhvJ

解决方法

尝试添加：

vertical-align: top;

你的按钮风格.