flex 行里 pill 错位：block 包裹层的行盒陷阱

在某个后台管理页面，我有一排小徽章：一个「直播中」状态标，一个「观看人数」统计，还有一个下拉选择框触发器——三者排列在同一条 flex items-center 横行里。理论上全部水平居中，但实际效果里有一个总是比其他两个高出 5px 左右，怎么调 margin、padding 都纠正不了。

现象

肉眼：最右边那个下拉触发按钮（inline-flex 样式）比左侧两个 <span> 徽章偏高。

用 CDP 脚本量一下三个兄弟节点：

[...row.children].map(k => {
  const r = k.getBoundingClientRect();
  return { tag: k.tagName, h: r.height, top: r.top, mid: r.top + r.height / 2 };
});

结果：左边两个徽章 h ≈ 15，右边那个包裹 <div> h ≈ 24，但 mid 三者居然相等。中心对齐，但高度不对，可见内容却还是错开的。

根因

关键区别在于结构。左边两个徽章是直接的 flex 子项：

<span class="flex items-center gap-1 px-2 py-0.5 rounded-full text-xs">
  直播中
</span>

右边那个为了放 dropdown 定位层，多套了一个 <div>：

<div class="relative">
  <button class="inline-flex items-center gap-1 px-2 py-0.5 rounded-full text-xs">
    画质 ▾
  </button>
</div>

问题就出在这个 <div class="relative">。

<div> 是块级元素，作为 flex 子项时，其高度由**行盒（line box）**决定——而行盒高度 = 继承的 line-height（通常 1.5 × 16px = 24px），并不是里面 inline-flex 按钮的内容高度（约 15px）。

于是：

items-center 把这个 24px 高的 wrapper 在行里居中——wrapper 的中心确实对齐了；
但 inline-flex 的按钮是行盒里的内联元素，它贴着行盒基线排，视觉上出现在 wrapper 偏上位置，而不是 wrapper 的几何中心。

坑：中心对齐 ≠ 视觉对齐

getBoundingClientRect().mid 三个节点可以完全相等，但只要 wrapper 的 height 大于其 inline 子元素，那个子元素就会在 wrapper 内部偏向某一侧。items-center 对齐的是 flex 子项的包围盒中心，不是可见内容的中心。

正解

让 wrapper 也成为 flex 容器，使其高度坍缩为子元素高度：

- <div className="relative">
+ <div className="relative flex items-center">
    <button className="inline-flex items-center gap-1 px-2 py-0.5 rounded-full text-xs leading-none">
      画质 ▾
    </button>
  </div>

同时给行里每个 pill 加 leading-none，切断对继承 line-height 的依赖。

加完之后再用同一段 CDP 脚本量：三个节点 h 都约为 15，top 和 mid 全部对齐，截图验证像素级准确。

另一个等价修法：把按钮改为块级 flex（去掉 inline-flex），wrapper 的行盒高度自然坍缩为块级子元素高度。

正解：wrapper 加 flex items-center，pill 加 leading-none

对任何需要定位（relative/absolute）的 wrapper，只要内部是 inline 级别子元素，一律补上 flex items-center 让它成为 flex 容器。flex 容器的高度跟着内容走，不依赖行盒。

排查思路小结

所有 pill 量 getBoundingClientRect()——比较 height，不只看 mid；
发现某节点 height 异常大 → 它是行盒造成的，不是 padding；
检查该节点是否是块级 wrapper + inline 子元素组合；
修法：wrapper 加 flex items-center，或子元素改 block 级，全行加 leading-none。

一句话外卖

flex 行里只要有 <div> 包裹了 inline-flex 子元素，这个 <div> 的高度就由行盒决定，而不是子元素——解法是给 wrapper 加 flex items-center，让它的高度跟着内容走。