最近便利なCSSおれおれAdvent Calendar 2023 – 21 日目

長さの単位で、1lh で 1 行分の高さになります。

lh = Line Height です。L の H です。数字の 1 じゃないです。

例

.box {
  line-height: 10px;
  height: 3lh; /* 30px */
}

line-height を変えると箱の高さもそれに合わせて変化します。デモの数字いじってみてね。

行数が必要になる line-clamp と一緒に使うの便利そう。

ルート要素の参照

em に対する rem と同様に、lh にも rlh というのがあります。

おしまい

読みづらいね。3lh が “31 H” にしか見えないね……。

仕様はまだ draft 段階みたいです。ブラウザーの実装は一通り済んでます。

参考