css - Why does text inside a button vertically aligns to middle by default when setting height?

Question

Here I'm concerned about the WHY and not "how to vertically align, etc.".

The button and the link have reset styles and look exactly the same with the applied styles, however when adding an explicit height they behave differently.

FWIW the link behaves the same as other elements (e.g. div), the button is the one that has special behaviour.

.btn {
	display: inline-block;
	border: 1px solid;
	font-size: inherit;
	font-family: inherit;
	color: inherit;
	text-decoration: none;
	background-color: transparent;
	padding: 0;
	vertical-align: middle;
	height: 100px;
	cursor: pointer;
}

<button class="btn">&lt;button&gt;</button>
<a class="btn" href="">&lt;a href&gt;</a>

标签： cssbuttonvertical-alignment