为何Button元素无法像Span一样填满导航栏高度？

原因 #

浏览器对<button>元素自带默认的用户代理样式，包括默认内边距、外边距和行高，这些样式会限制button的高度，导致它无法像<span>（无这类默认样式）一样被flex容器的默认align-items: stretch规则拉伸，填满父容器的h-20高度，从而露出红色背景。

解决方法 #

给button添加Tailwind类重置默认样式，让它能被flex容器完全拉伸：

<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 m-0 p-0 bg-red-400">
    <a class="flex items-center bg-green-400 px-6">
      <span>Hello</span>
    </a>
  </button>
</div>

如果需要更彻底清除所有浏览器默认的表单元素样式，可使用appearance-none类：

<button class="flex appearance-none bg-red-400">
  <a class="flex items-center bg-green-400 px-6">
    <span>Hello</span>
  </a>
</button>

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