【CSS】lh単位とは？

lhとは？

この単位が使われる要素のline-heightと同じ長さを表します。

p {
 line-height:1.5;
 font-size:16px;
 padding:1lh;//16px * 1.5 = 24px
}

line-heightの値は16px * 1.5 = 24pxで、1lhはこれと同値になります。

使用例

XやCodePenから使用例を探しました。

ハーフレディングを消す

アイコンを上揃えする

一文字目だけ大きくする

See the Pen Making moves with the lh unit by web.dev (@web-dot-dev) on CodePen.

対応ブラウザ

最新の環境ではモダンブラウザ全て対応済みです。

参考記事