将SVG图标与span对齐，相同垂直

Question

<div class="flex items-center">
<span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-red-100 text-red-800 mb-5">
Recommended
</span>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" class="w-5 h-5 ml-2">
<path fill="red" d="M15.362 5.214A8.252 8.252 0 0112 21 8.25 8.25 0 016.038 7.048 8.287 8.287 0 009 9.6a8.983 8.983 0 013.361-6.867 8.21 8.21 0 003 2.48z" />
<path fill="yellow" d="M12 18a3.75 3.75 0 00.495-7.467 5.99 5.99 0 00-1.925 3.546 5.974 5.974 0 01-2.133-1A3.75 3.75 0 0012 18z" />
</svg>
</div>

https://play.tailwindcss.com/CTtHNhvQQW

为什么会有这样的差距?

Answer 1

因为你给了推荐按钮一个底部边距。删除mb-5

https://play.tailwindcss.com/OAdKgxMnLY