Inputs are moved down by 1px

Question

I am trying to make my buttons look properly when applied to <a> or <input> (at least in chrome). However the input is moved down by 1px but I really dont know why.

I tried to overwrite every style that comes from browser but it did not work.

I know I could just move it up with position relative or something else but thats not solution I am searching for, i want to know where that 1px comes from.

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;
}

Demo here: http://codepen.io/wfmarc/pen/uHhvJ

Answer 1

Try adding:

vertical-align: top;

to your button style.

Answer 2

to explain : <a> is by default an inline marker, so when you give them a display block or inline-display, you need to give them an alignment too for positioning.... add vertical-align: top; to your button class as per sbeliv01 to give it a position element! :)