Inputs are moved down by 1px

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