buttons have different vertical position if contain svg

[brianmay]

Why do these two buttons have different vertical positions?

https://play.tailwindcss.com/mITj5TNhwN

<div class="m-2 bg-green-200 p-0 align-top">
  <button type="button" class="m-0 h-20 w-20 bg-red-400 p-0">Hello</button>

  <button type="button" class="m-0 h-20 w-20 bg-red-400 p-0">
    <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="size-6">
      <path stroke-linecap="round" stroke-linejoin="round" d="m14.74 9-.346 9m-4.788 0L9.26 9m9.968-3.21c.342.052.682.107 1.022.166m-1.022-.165L18.16 19.673a2.25 2.25 0 0 1-2.244 2.077H8.084a2.25 2.25 0 0 1-2.244-2.077L4.772 5.79m14.456 0a48.108 48.108 0 0 0-3.478-.397m-12 .562c.34-.059.68-.114 1.022-.165m0 0a48.11 48.11 0 0 1 3.478-.397m7.5 0v-.916c0-1.18-.91-2.164-2.09-2.201a51.964 51.964 0 0 0-3.32 0c-1.18.037-2.09 1.022-2.09 2.201v.916m7.5 0a48.667 48.667 0 0 0-7.5 0" />
    </svg>
    Hello
  </button>
</div>

On Firebox and Chrome this looks like

If I delete the nested svg, they appear the same. But can't understand why. I would have expected the vertical position should be the same regardless of if the button has an svg image or not.

SVG image was copied from https://heroicons.com/

[wongjn]

They're aligned according to the text base line:

You may have meant to apply the vertical-align: top to the <button> elements themselves: https://play.tailwindcss.com/kDcYAZDtbX

[brianmay]

OK, I think that was it. Thanks!

Somehow in my "real code" the icon and the text fit on the same line. Not sure why that isn't happening in the above, probably got something else wrong for the example. I suspect the icon increased the height of the text, which meant they were now misaligned. And it looked like the problem was with the icon, which was not strictly correct.