インラインフレックスは要素に余分な垂直方向のスペースを追加しています

Question

したがって、スペーシングにフレックスを使用する単純なマテリアルベースのスイッチクラスを一緒に結んでいます。すべてうまくいきますが、レイアウトのバリエーションを作ったときに予想外の間隔があります。

Codepen Example

See codepen example 

あなたが例で見ることができるように、左側の列には、右の列よりも多くの垂直方向の間隔を持っています。私がやったことは全てスパンを並べ替えただけなので、私には分かりません。

通常のフレックスに切り替えると問題が解決されるため、インライン化が必要です。しかし、font-size：0やline-height 1のようなインラインスペーシングの通常のやり方は、何の違いもありません。

Answer 1

デバッグ助けを求める質問は、質問自体に**それを再現するために必要な最短のコードが含まれている必要があり

.pv-switch__switch 

Example Pen