如何调整Tailwind CSS使p与p、p与a标签垂直间距一致？

问题核心是：Tailwind的space-y-*类仅对块级元素生效，而<a>标签默认是行内元素，导致space-y-0.5无法为它添加上间距，最终造成「Tyler Hilbert」与「Computer Engineering」的间距，和「Computer Engineering」与「Linked In」的间距不一致。

以下两种方法都能解决这个问题：

方法一：将<a>转为块级元素 #

给<a>标签添加block类，让它成为块级元素，这样space-y-0.5就能对其生效，三个元素的垂直间距会统一为space-y-0.5对应的大小：

<div class="py-8 px-8 max-w-sm bg-white rounded-xl shadow-lg space-y-2 sm:py-4 sm:flex sm:items-center sm:space-y-0 sm:space-x-6 m-4">
    <img class="block mx-auto h-24 rounded-full sm:mx-0 sm:shrink-0" src="../imgs/tyler.jpg" alt="Tyler Hilbert" />
    <div class="text-center space-y-2 sm:text-left">
        <div class="space-y-0.5">
        <p class="text-lg text-black font-semibold">
            Tyler Hilbert
        </p>
        <p class="text-slate-500 font-medium">
            Computer Engineering
        </p>
        <a href="https://www.linkedin.com/in/tyler-hilbert/" class="block px-4 py-1 text-sm text-blue-600 font-semibold rounded-full border border-blue-200 hover:text-white hover:bg-blue-600 hover:border-transparent focus:outline-none focus:ring-2 focus:ring-blue-600 focus:ring-offset-2">Linked In</a>
        </div>
    </div>
</div>

方法二：手动给<a>添加上间距 #

如果不想改变<a>的元素类型，直接给它添加mt-0.5类，手动补上和两个<p>标签之间一致的间距：

<div class="py-8 px-8 max-w-sm bg-white rounded-xl shadow-lg space-y-2 sm:py-4 sm:flex sm:items-center sm:space-y-0 sm:space-x-6 m-4">
    <img class="block mx-auto h-24 rounded-full sm:mx-0 sm:shrink-0" src="../imgs/tyler.jpg" alt="Tyler Hilbert" />
    <div class="text-center space-y-2 sm:text-left">
        <div class="space-y-0.5">
        <p class="text-lg text-black font-semibold">
            Tyler Hilbert
        </p>
        <p class="text-slate-500 font-medium">
            Computer Engineering
        </p>
        <a href="https://www.linkedin.com/in/tyler-hilbert/" class="mt-0.5 px-4 py-1 text-sm text-blue-600 font-semibold rounded-full border border-blue-200 hover:text-white hover:bg-blue-600 hover:border-transparent focus:outline-none focus:ring-2 focus:ring-blue-600 focus:ring-offset-2">Linked In</a>
        </div>
    </div>
</div>

内容的提问来源于stack exchange，提问作者user2417339