テキストのすき間問題。見て見ぬふりしてきたシリーズの1つです。
vertical-align も気になっているのですが、今回は line-height を見つめ直す機会があったのでおさらいします。
まずこちらの記事を読んで「なるほど」と理解してから考えます。
【CSS】line-heightで行間を調整する方法：おすすめの値は？
覚えておきたいこと
line-height の単位は付けないほうが使いやすい
emや%よりも「単位なし指定」がオススメです。なぜかというとemや%だと親要素で計算された行高が、子要素にそのまま引き継がれてしまうからです。つまり、親要素のフォントサイズが40px、子要素のフォントサイズが20pxの場合にも、子要素には親要素と同じ行間が適用されてしまうのです。 一方で単位なし指定の場合、子要素のフォントサイズに応じて行高を計算し直してくれます。
てっきり単位なしは em や % と同じ意味だと思っていました（この2つは同じ、だと思います）。
今までのコード書き直したい...。
line-height はblock要素に効く
これはinline-block でもダメでした。
今回検証したところ、span要素には効きませんでした。
確かに文章の途中で行間が変わる、というのは考えにくい事象ですね。
レイアウトしたもの
こんな感じの、1行目が大きい文字で、2行目が小さい文字のレイアウトです。
いろいろ書き方はあると思いますが、今回はp要素の中にspan要素で小さい字を入れて改行させました。
この図が今回のまとめです。
当初大きい文字（1行目）と小さい文字（2行目）の行間がものすごく空いてしまい、line-height: 1em だ！line-height: 0だ！とあれこれやっていましたが、改めてちゃんと調べたらスッキリしました。
おまけ
ちなみに、line-height: 0 ですと要素の高さが0になってしまうようです。
テキストをドラッグして選択したときの高さというのは要素の高さとはまた少し違い、line-heightの高さなのかな？と思いました（line-height: 0 は最低限1文字の高さの範囲で選択できます）。
そもそもインライン要素の高さとは...。
このあたりややこしそうです。
See the Pen line-height検証 by yokoyoko (@yokoyoko_code) on CodePen.
