In the following HTML/CSS page, I'm trying to make a link and a button look the same. The reason is that the element used should follow its meaning (go somewhere vs. do something), while the look-and-feel depends on whatever turns out to look good for users.
*,
:after,
:before {
box-sizing: inherit
}
.button {
margin: 0px;
width: 100px;
inline-size: 100px;
padding: 20px;
color: black;
text-decoration: none;
font-family: sans-serif;
align-items: normal;
perspective-origin: 60.8906px 44.5625px;
transform-origin: 60.8984px 44.5625px;
cursor: pointer;
display: inline-block;
min-height: 4em;
outline: 0;
border: none;
vertical-align: baseline;
background: #e0e1e2 none;
font-weight: 700;
line-height: 1em;
text-align: center;
font-size: 1rem
}
.container {
height: 100px;
}<div class="container">
<a class="button" href="#">A</a>
<button class="button">A</button>
</div>The look pretty similar, but in both Chrome and Firefox, they are arranged in a different way vertically. The text seems to be at the same Y, but the background box around it isn't. I would expect such a behaviour if they somehow get different CSS properties, possibly from the user-agent stylesheet.
The interesting thing is that when I have the browser (Chrome) show me all computed CSS properties, all of them are equal. I verified this by copying the properties of each element to a file, then diff'ing the files.
I also checked whether the order of the elements is relevant, but it isn't -- in the sense that the link/button always look the same no matter where in the element order they appear.
Why do the elements look different even though all CSS properties are the same, and what changes are needed to make them look the same?
(The second question is meant to pinpoint the exact fix for the problem, not just some "shotgun approach".)