因为根据span和button的文档

HTML元素是一个用于描述内容的通用内联容器，它本身并不表示任何内容。它可用于对元素进行分组以实现样式化目的（使用class或id属性）

span具有此处指定的属性flex。尝试从span中删除类flex，您会发现跨度也仅使用a标记所需的高度。flex是推动span以完成parent高度的类

没有flex类的输出范围：

而在button中，它有自己的属性，并且不像span那样完整，默认情况下，它只使用子对象所需的高度。

溶液

在<button>的<a>标记内使用：h-full
或
将button更改为div

输出：

代码：

<div class="top-0 flex h-20 w-full justify-between bg-white">
  <span class="flex bg-red-400">
    <a class="flex items-center bg-green-400 px-6">
      <span>Hello</span>
    </a>
  </span>

  <button class="flex bg-red-400">
    <a class="flex h-full items-center bg-green-400 px-6"> 👈 add h-full hear for a to use the entire height
      <span>Hello</span>
    </a>
  </button>
</div>