Have the same height for a link, button and input - css

Question

I would like to have the same style for my buttons, links and inputs. I am having a problem with the height and I can not identify the cause.
In this example, my button and my input is 30 pixels high but my link only has 29 pixels.
* {
box-sizing: border-box;
}
html {
font-size: 62.5%;
}
body {
font-size: 2rem;
}
button, input, a {
background: none;
border: 1px solid grey;
color: black;
font-size: 1.6rem;
outline: none;
padding: 5px;
text-decoration: none;
}
<button>Hello</button>
<input type="text" placeholder="Hello" />
Hello
What is this difference?

Answer 1

You need to make sure your font-family is the same for all elements (currently your anchor has a different font) and also make sure your elements are block or inline block, otherwise the padding isn't applied:
* {
box-sizing: border-box;
}
html {
font-size: 62.5%;
}
body {
font-size: 2rem;
}
button,
input,
a {
display: inline-block;
font-family: arial;
background: none;
border: 1px solid grey;
color: black;
font-size: 1.6rem;
outline: none;
padding: 5px;
text-decoration: none;
}
<button>Hello</button>
<input type="text" placeholder="Hello" />
Hello