Tailwind CSS同样式a链接与button高度不一致解决方法

相同内边距下a链接和button按钮高度不匹配，完全是浏览器内置默认样式的差异导致的，和Tailwind本身的样式计算无关：

• 显示属性逻辑不同：<a>默认是inline（行内元素），这类元素的上下内边距只会渲染视觉上的背景延伸，不会实际撑开元素在文档流里的占位高度；而<button>默认是inline-block（行内块元素），所有内边距、边框都会严格按照盒模型计算总高度，二者计算逻辑的差异直接带来了高度差。
• 对齐规则偏差：行内、行内块元素默认都按vertical-align: baseline基线对齐，但button作为原生表单控件，浏览器给它定义的基线位置和普通行内文本的基线位置存在固有偏移，就算二者实际计算高度一致，视觉上也会出现上下错位、高低不齐的效果。
• 内置样式残留：部分浏览器会给button元素添加默认的极细边框，就算没有显式写border属性，这部分默认边框也会额外占据1-2px的高度，进一步拉大高度差。

不需要把所有操作类a链接都替换成button标签，只要给作为按钮使用的a标签补几个工具类，抹平元素默认样式差异即可：

• 给a链接加inline-block，把它从行内元素改成行内块元素，让内边距、边框的高度计算逻辑和button保持一致
• 给两类按钮都加leading-none统一行高，加appearance-none清除浏览器给原生控件加的特殊内置样式，给button额外加border-0清除默认边框
• 可选：统一给两个按钮加text-center，保证文字在按钮内的对齐位置完全一致

修正后的代码参考：

<a href=""
value="cancel" 
class="inline-block ring-gray-500 ring-1 rounded text-gray-800 hover:text-white p-2.5 hover:bg-gray-800 appearance-none leading-none text-center">Back</a>

<button value="submit" 
class="ring-blue-400 ring-1 rounded text-white bg-blue-500 p-2.5 hover:bg-blue-600 appearance-none border-0 leading-none text-center">Next</button>

按以上规则调整后，两个元素的渲染高度、文字位置会完全匹配。

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