为何设置height后按钮内文本默认垂直居中？（仅求原理，非实现方案）

你遇到的这个现象其实戳中了浏览器对HTML元素布局的一个核心差异——原生表单控件和普通元素的底层处理逻辑完全不一样，咱们来拆解背后的原理：

1. 是自带"保护机制"的表单控件 #

<button>属于原生表单交互控件，浏览器为了保证这类控件在不同平台、不同场景下的可用性（比如避免文本紧贴边框、保证点击区域合理），会给它套上一些没法仅通过CSS重置完全抹掉的隐含布局规则：

• 哪怕你设置了padding: 0，部分浏览器还是会为按钮保留一丢丢内部垂直间距，用来保证文本的可读性；
• 按钮里的文本会被浏览器强制垂直居中，这个对齐逻辑是独立于vertical-align属性的——换句话说，你设置的vertical-align: middle对按钮内部文本的影响，和对<a>标签的影响完全不是一回事。

2. 高度计算的底层逻辑天差地别 #

对于<a>、<div>这类普通的inline-block元素，当你设置height: 100px时，这个高度就是元素内容盒的精确高度，文本会严格按照line-height和vertical-align的规则在这个盒子里排布。

但<button>不一样，浏览器会把你设置的height当成按钮的整体可见高度上限，然后在内部给文本分配空间时，优先保证文本的可读性——比如自动调整文本的行高、或者偷偷加一点内部间距，最终导致它的视觉表现和普通元素不一致。

结合你的代码看差异 #

看你贴的这段代码：

.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>

这里<a>标签的文本会严格按照vertical-align: middle在100px高的盒子里居中，而<button>的文本虽然看起来也是居中，但这是浏览器通过表单控件专属的对齐逻辑实现的——你甚至能在某些浏览器里看到两者的文本垂直位置有细微偏移，这就是底层布局规则不同导致的。

说白了就是：<button>是浏览器重点照顾的交互控件，有自己的一套布局优先级；而<a>这类普通元素则完全遵循CSS盒模型的规则，这就是两者设置显式height后表现不同的核心原因。

内容的提问来源于stack exchange，提问作者krulik