vertical position of an a-element and button-element - html

Question

I want to style a <button> and <a> element both into the same format. I use the following code:
button,
a {
border: solid 1px black;
background-color: white;
color: black;
font-family: 'Arial';
padding: 0 15px;
font-size: 13px;
height: 35px;
line-height: 35px;
display: inline-block;
}
#dummy-block {
background-color: black;
padding: 0;
margin: 0;
height: 20px;
}
<div id="dummy-block"></div>
<button>My Button</button>
<a>My Link</a>
But the <button> element seems to ignore the height and my <a> element does not touch the edge of the black dummy <div> above:
You can test the code in my fiddle: http://jsfiddle.net/gyrrcrqc/1/

Answer 1

Try this:-
button, a {
background-color: white;
border: medium none;
box-shadow: 0 0 1px #000 inset;
color: black;
display: inline-block;
font-family: "Arial";
font-size: 13px;
height: 35px;
line-height: 35px;
padding: 0 15px;
vertical-align: top;
}
Or:-
button, a {
background-color: white;
border: medium none;
vertical-align:top;
color: black;
display: inline-block;
font-family: "Arial";
font-size: 13px;
height: 35px;
line-height: 35px;
padding: 0 15px;
border:1px solid #000;
box-sizing:border-box
}
DEMO2
DEMO

Answer 2

Apparently the default box-sizing method for button is border-box while that for inline-block is content-box. So:
35px height means the <a> is actually 37px tall (border adds 2px)
35px height means the <button> tag is 35px tall (35px includes the border)
Set the box-sizing: border-box on both elements.
button,
a {
border: solid 1px black;
background-color: white;
color: black;
font-family: 'Arial';
padding: 0 15px;
font-size: 13px;
height: 35px;
line-height: 35px;
display: inline-block;
box-sizing: border-box;
}
#dummy-block {
background-color: black;
padding: 0;
margin: 0;
height: 20px;
}
<div id="dummy-block"></div>
<button>My Button</button>
<a>My Link</a>

Answer 3

try adding vertical-align: bottom to button, a selector
button, a
{
border: solid 1px black;
background-color: white;
color: black;
font-family: 'Arial';
padding: 0 15px;
font-size: 13px;
height: 35px;
line-height: 35px;
display: inline-block;
vertical-align: top;
}
#dummy-block
{
background-color: black;
padding: 0;
margin: 0;
height: 20px;
}
<div id="dummy-block"></div>
<button>Okay</button>
<a>Edit</a>

Answer 4

a
{
padding:1px 15px;
}
button,a
{
border: solid 1px black;
background-color: white;
color: black;
font-family: 'Arial';
font-size: 13px;
height: 35px;
line-height: 35px;
display: inline-block;
}
button
{
padding: 0 15px;
}