Box styled with Tailwind has unwanted margin on top of it-CodePudding

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

<div >
    <button >
        <span >Open main menu</span>
        <span >
            <span aria-hidden="true" ></span>
            <span aria-hidden="true" ></span>
            <span aria-hidden="true" ></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 >
  <button >
      <div >
        <div ></div>
        <div ></div>
        <div ></div>
      </div>
  </button>
</div

CodePudding user response：

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 >
    <button >
        <span >Open main menu</span>
        <div >
            <div aria-hidden="true" ></div>
            <div aria-hidden="true" ></div>
            <div aria-hidden="true" ></div>
        </div>
    </button>
</div>

CodePudding user response：

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 >

change to

<span >