带有尾风样式的盒子顶部有多余的空隙。

Question

我在尝试创建一个汉堡菜单按钮。但是button元素在上面有一个不想要的空白。

<div class="bg-red-400 w-10 h-10 rounded-md">
    <button class="bg-blue-400 w-full h-full relative focus:outline-none">
        <span class="sr-only">Open main menu</span>
        <span class="flex absolute top-0 w-full h-full relative">
            <span aria-hidden="true" class="block transform transition duration-300 ease-in-out bg-black w-8 h-0.5 "></span>
            <span aria-hidden="true" class="block transform transition duration-300 ease-in-out bg-black w-8 h-0.5 false"></span>
            <span aria-hidden="true" class="block transform transition duration-300 ease-in-out bg-black w-8 h-0.5 "></span>
        </span>
    </button>
</div>

此代码尚未完成。我得先谈这个问题。

这里怎么了？

更新

这段代码也有同样的问题。

<div class="bg-blue-400 w-10 h-10">
  <button class="w-full h-full">
      <div class="w-full h-full flex flex-col gap-2 bg-yellow-400">
        <div class="bg-white h-0.5 w-4/5"></div>
        <div class="bg-white h-0.5 w-4/5"></div>
        <div class="bg-white h-0.5 w-4/5"></div>
      </div>
  </button>
</div

Answer 1

这段代码有很多问题。

• 绝对和相对不能并行使用。
• ，您正在创建跨域并使它们阻塞，为什么不使用div。
• 也需要被定向为列。

。

<div class="w-10 h-10 rounded-md">
    <button class="bg-blue-400 w-full h-full relative focus:outline-none">
        <span class="sr-only">Open main menu</span>
        <div class="flex flex-col items-center justify-center gap-2 absolute top-0 w-full h-full">
            <div aria-hidden="true" class="transform transition duration-300 ease-in-out bg-black w-8 h-1"></div>
            <div aria-hidden="true" class="transform transition duration-300 ease-in-out bg-black w-8 h-1 false"></div>
            <div aria-hidden="true" class="transform transition duration-300 ease-in-out bg-black w-8 h-1"></div>
        </div>
    </button>
</div>

Answer 2

无法获得您提供的代码片段来生成任何值得注意的或描述性的内容，可能是在上传图像示例，但只是简单地看一眼。您使用的是绝对类和相对类，而在这里只使用一个类：

<span class="flex absolute top-0 w-full h-full relative">

更改为

<span class="flex top-0 w-full h-full relative">