Why doesn't this button behave like the span?

Question

In the code : tailwind play, The only thing that changes between these two elements is:

span

instead of

button

What I need is the button fill all the navbar height, like the span one (no red background visible).

Why it does not?

<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 items-center bg-green-400 px-6">
      <span>Hello</span>
    </a>
  </button>
</div>

Answer 1

It is because according to docs of span and button

The HTML element is a generic inline container for phrasing content, which does not inherently represent anything. It can be used to group elements for styling purposes (using the class or id attributes)

span is having properties which is specified here flex. Try removing class flex from span you'll observe the span is also using only the height required by a tag. flex is the class which is pushing the span to complete height of parent

Output span without flex class:

Whereas in the button it has its own attribute and is not as fuild as span is, by default it uses only the height required by the child. For this to have the entire height you should explicitly specify the height

---

Solution

Use: h-full inside the <a> tag of <button>

or

change button to div

Output:

Code:

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