Tailwind CSS: Button larger than A link

Question

Using Tailwind CSS. Setting up a form with a button to save the data then an 'a link' to abort.

The button has slightly more padding in the height than the link but they have similar css. Changing the a link to a button tag makes them match up and have the same height.

Can someone kindly point to where this extra padding is referenced or how to solve this by not making everything a button.

Please see https://play.tailwindcss.com/7MmHdWY6Iw for example (updated link as it was originally incorrect)

<a href=""
value="cancel" 
class="ring-gray-500 ring-1 rounded text-gray-800 hover:text-white p-2.5 hover:bg-gray-800">Back</a>

<button value="submit" 
class="ring-blue-400 ring-1 rounded text-white bg-blue-500 p-2.5 hover:bg-blue-600">Next</button>

Answer 1

Each element has its own defined area. That's why you see slight vertical padding in the button.

You can see it more clearly when you remove all the padding classes.

You can make them equal by defining custom values in padding.

<script src="https://cdn.tailwindcss.com"></script>
<div class="p-10 space-x-5">
  <a href=""
value="cancel" 
class="ring-gray-500 ring-1 rounded text-gray-800 hover:text-white px-3 py-[13px] hover:bg-gray-800">Back</a>

<button value="submit" 
class="ring-blue-400 ring-1 rounded text-white bg-blue-500 px-3 py-[10px] hover:bg-blue-600">Next</button>
</div>