CODEWITHSUNDEEP
csstailwind-css
Hossein Fallah
Hossein Fallah

Reputation: 2539

Box styled with Tailwind has unwanted margin on top of it

I'm trying to create a Hamburger menu button. But the button element has an unwanted margin on top of it.

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

This code is not complete yet. I need to first this issue.

What is wrong here?

Update:

This code also has the same problem.

<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

Upvotes: 0

Views: 1675

Answers (2)

kazmi066
kazmi066

Reputation: 625

There were pretty much issues with that code.

  • Absolute and relative can't be used parallel.
  • You are making spans and making them block, why not use div.
  • Also flex needs to be directed as columns (flex-col).
<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>

Upvotes: 2

5henanigans
5henanigans

Reputation: 69

Can't get the code snippet that you provided to produce anything noteworthy or descriptive, may be work uploading an image example but just from a glance. you are using both absolute and relative classes when you should only be using one here:

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

change to

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

Upvotes: 0

Related Questions