Inline-flex为元素添加了额外的垂直空间

Question

所以我拼凑了一个简单的基于材料的开关类，它使用flex作为间距。一切都运作良好但是，当我制作一些布局变体时，我会得到一些意想不到的间距。

Codepen Example

See codepen example

正如您在示例中所看到的，左侧列的垂直间距比右侧列的垂直间距更大。它对我来说没有意义，因为我所做的只是重新安排了跨度。

我知道这与内联切换到常规弹性修复问题有关。但像font-size：0和line-height 1这样的内联间距的常规技巧似乎没有任何区别。

Answer 1

您需要将高度10px添加到

.pv-switch__switch

Example Pen