Why is an internal alignment of a <button> button different from a <a> link, even using the same class?

Question

Well, I created a class called .btn, where I wanted to use it so much to button as for a. So I pushed a few things in this class, to reset the original style, both of the button as in the a.

For example, in the a I removed the text-decoration. In the button, forced the change of background and border. So far so good.

The problem is that I’m noticing that the element button, even using the -webkit-appearence: none, has a different behavior in relation to the alignment of the internal text, according to the test below:

.btn{
    border: 1px solid transparent;
    padding: 10px 20px;
    box-shadow: 0 1px 2px 0px #666;
    outline: none;
    border-radius: 4px;    
    background-color: #efefef;
    cursor: pointer;
    transition: box-shadow .1s ease-out, border-color .3s linear;
    font-weight: bold;
    box-sizing: border-box;
    vertical-align: top;
	  display: inline-block;
	
    min-height: 55px;
    font-size: 14px;
	  
	  text-decoration: none;
	  color: #222;
	  background-image: none;

    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    font-family: Arial;

}

<button class="btn">
  Eu sou um &lt;Button&gt;
</button>

<a class="btn">
    Eu sou um &lt;A&gt;
</a>

I’ll put the image too, to show how the rendering looked in my Google Chrome:

Now I have my doubts:

• What property makes the button align the texts in the middle, while the a nay?

• Is there a way to reset this standard alignment of button? My intention was to leave the two centralized, but more importantly than that, I want to know if there is a property of the button made it align to the center.

_{Observing: The question is not only intended to know how to align the text to the center, but to know in depth about what caused the difference mentioned above, since I used the same style for all.}

_{Observation 2: I could use inline-flex and match justify-content: center; align-itens: center, but that’s not the answer I want, because I’m already putting it in the question. I want to know specifically about the details presented above, and not just a "support for the alignment problem"}

Answer 1

Updated - 08/11/2018

After much research despite understanding the question in various ways I researched and got a more plausible answer with sources for your question.

The answer is from Cubed Eye Stack overflow user.

Firstly, the main issue here is that <button> at least in Firefox are built with an internal element between the tag <button> and your children. In Firefox it is called moz-button-content is not something that can be achieved with CSS and has been set to display the block without inheriting the height of the button, you can see this style statement in useragent style sheet.

The default browser is already encoded to center the contents of the button vertically.

With these two questions you can start to see how the button forces the content to be centered, consider:

<button>

+------------------------+ ^
| button extra space     | |
|                        | |
+------------------------+ |
|| ::moz-button-content || | button height
||   display: block;    || |
+------------------------+ |
|                        | |
| button extra space     | |
+------------------------+ v

There is an alternative solution to the problem if you really want to change the default behavior, but this does not completely solve the problem depending on your implementation.

If you insert a wrapper <span> with display: block the only child of the button and put all its content in it, you can use it to skip the moz-button-content element.

You will need to make this <span> element has height: inherit correctly filled the height of the button and then add your normal button style to the <span> instead, you will get basically the desired behavior.

* {
box-sizing: border-box;
margin: 0;
border: 0;
padding: 0;
font-family: san-serif;
background: none;
font-size: 1em;
line-height:1;
vertical-align: baseline;
}

button, a {
height: 3em;
}

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

button > span {
display: block;
height: inherit;
}

a {
display:inline-block;
background: green;
}



button.styled > span , a.styled{
padding: 10px;
background: yellow;
}

<button>
<span>Button content</span>
</button>

<a>
<span>Link Content</span>
</a>

<br/>
<br/>

<button class="styled">
<span>Button content</span>
</button>

<a class="styled">
<span>Link Content</span>
</a>

You should use one on <span> time of a <div>, as div are not children valid for <button>.