Question

The button is 2px bigger then the a tag with same styles. Any ideas why is it doing it and how to fix it?

jsfiddle

<a href="">Some Text</a>
<button> Some Text</button>

a, button {
  background-color: red;
  border: none;
  text-decoration: none;
  font-size: 14px;
  line-height: 14px;
  font-family: Verdana;
  display: inline-block;
  color:black;
  padding:0;
}

Answer 1

The button has padding.
Set padding : 0; on the button and they will look the same

Firefox has its own thing…
Try adding the following:

button::-moz-focus-inner { 
    border: 0;
    padding: 0;
}