Tailwind CSS中文本与图片未对齐问题排查求助

问题场景 #

布局中包含两张图片的inline-block容器，与右侧文本「Some name」出现垂直对齐错位，相关代码如下：

<div class="inline-block">
    <img class="relative h-6 w-6 rounded-full bg-gray-50 ring-2 ring-white" src="https://static.generated.photos/vue-static/home/hero/6.png" alt="">
    <img class="relative bottom-2 left-4 h-3 w-3 rounded-full bg-gray-50 ring-2 ring-white" src="https://static.generated.photos/vue-static/home/hero/8.png" alt="">
</div>
Some name

核心原因 #

• inline-block默认垂直对齐规则：inline-block元素默认采用vertical-align: baseline对齐方式，即元素的基线会与相邻文本的基线对齐。但外层inline-block容器的基线位置因内部元素布局被压低，导致与文本基线错位。
• relative定位不脱离文档流：第二张图片使用bottom-2相对定位仅改变视觉位置，但其在文档流中的原始占位空间仍保留，撑开了外层inline-block容器的高度，进一步拉低了容器的基线位置，加剧了对齐偏差。

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