使用Tailwind CSS时文本基线高度不一致的原因是什么？

问题代码（Tailwind版本） #

<button type="button" class="flex items-center px-5 py-2 bg-[#152DB5] rounded-[9.9rem]">
  <svg><!-- ... --></svg>
  <span class="inline-block align-middle text-[1.4rem] font-[700] leading-[2.2rem] tracking-[-0.01em] text-[#fff]">코드 올리기</span>
</button>

对比说明 #

图1：纯CSS制作的目标按钮
图2：Tailwind CSS制作的存在基线问题的按钮

我使用Tailwind CSS制作按钮时，发现它的文本基线高度和纯CSS版本不一致，但两个按钮内的span字体样式参数应该是相同的：

font-size: 1.4rem;
font-weight: 700;
line-height: 20px;
letter-spacing: -0.01em;

问题原因及解决办法 #

1. 行高值不匹配
   你Tailwind代码里写的leading-[2.2rem]，按根字体16px换算的话是35.2px，但纯CSS里的行高是20px，这两个行高完全不同，直接导致文本垂直位置出现差异。

2. 对齐属性的细微差异
   Tailwind的align-middle和纯CSS默认垂直对齐逻辑存在细微区别，再加上inline-block的span元素，可能会引入额外的垂直空间。

修复步骤：

• 将Tailwind span类里的leading-[2.2rem]修改为leading-[20px]，和纯CSS行高保持统一
• 给svg也加上align-middle类，确保图标和文本基线对齐
• 可尝试去掉span的inline-block属性，或者调整按钮的flex布局对齐细节，避免行高带来的额外内边距

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