Reduce clickable area for <a> with Tailwind CSS-CodePudding

I'm using Tailwind CSS and I recently created a link using <a>, <p> and <div>. But the clickable area from <a> tag is bigger than I want, I just want in the text, but the box are in div.

I'll show my code:

<div >
  <a :href="route('login')" >
    <img src="../../Assets/Img/menorq.svg"  alt="">
    <p >Back to login</p>
  </a>
</div>

Here's how it's going:

CodePudding user response：

You can shrink the anchor's flex box to contain just the content by using inline-flex and then center the content inside the surrounding div. For example:

<div >
  <a :href="route('login')" >
    <img src="../../Assets/Img/menorq.svg"  alt="">
    <p >Back to login</p>
  </a>
</div>