兩個“p”標記之間的垂直間距不同于“p”標記和“a”標記之間的垂直間距。我如何更新順風CSS，使泰勒希爾伯特和計算機工程之間的垂直距離與計算機工程和鏈接之間的垂直距離相同？

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

您可以在段落中添加前導零。我還將制作div flex-col并使用gap-y來定義行之間的間距。

我也覺得如果職銜和按鈕之間的距離大于姓名和職銜之間的空間會更好看，所以我在a標簽上加了一個mt-3類。但這不是你的問題，所以你可能想刪除它。

<div class="flex flex-col gap-y-1">
          <p class=" text-slate-700 font-semibold text-lg leading-none">
              Tyler Hilbert
          </p>
          <p class="text-slate-400 font-medium leading-none">
              Computer Engineering
          </p>
          
          <a href="https://www.linkedin.com/in/tyler-hilbert/" class="mt-3 px-4 py-1 mx-auto sm:ml-0 max-w-max 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>

下面是順風游樂場的一個工作示例:

https://play.tailwindcss.com/Frw4s4j3wK?布局=水平