I've been pondering this question for quite some time now. Whenever I try to style a button in HTML using the a tag or button tag with equal padding on the top and bottom, the buttons still align horizontally. Please refer to the image below for clarification.
https://i.sstatic.net/72Veg.jpg
For a more detailed example, check out this JS FIDDLE
The code in question is as follows:
a{
display:inline-block;
text-transform:uppercase;
background:#1a8acf;
padding:10px 20px;
text-decoration:none;
color:#fff;
font-family: arial, tahoma, helvetica, sans-sarif;
}
button{
border:none;
padding:10px 20px;
background:#14214d;
color:#fff;
font-family: arial, tahoma, helvetica, sans-sarif;
}