英文:
Vertical spacing between p tags needs to be the same as vertical spacing between p and a tags
问题
两个 'p' 标签之间的垂直间距与 'p' 标签和 'a' 标签之间的垂直间距不同。如何更新 Tailwind CSS，使得 Tyler Hilbert 和计算机工程之间的垂直距离与计算机工程和 Linked In 之间的垂直距离相同？
<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>
英文:
The vertical spacing between 2 'p' tags is not the same as the vertical spacing between a 'p' tag and an 'a' tag. How do I update Tailwind CSS so the vertical distance between Tyler Hilbert and Computer Engineering is the same as the vertical distance between Computer Engineering and Linked In?
<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>
答案1
得分: 1
以下是您要翻译的内容：
您可以向段落添加leading-none。我还会将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>
以下是在Tailwind Playground中的工作示例：
https://play.tailwindcss.com/Frw4s4j3wK?layout=horizontal
英文:
You can add a leading-none to the paragraphs. I would also make the div flex-col and use gap-y to define the space between the rows.
I also think it looks better if the distance between the job title and the button is larger than the space between the name and the job title, so I added a mt-3 class to the a tag. But that was not your question, so you might want to remove that.
<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>
Here is a working example in tailwind playground:
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论