くまだどうも、くまだです。
最近、コーディングでさまざまな単位に出会います。
今回はlhとrlhという単位についてのお話。
単位vi・vbについてはこちら。
lh・rlhについて
CSSの単位の一つ、「lh」はline-heightと同じ長さを表す単位です。
例えば、コードは以下のようになります。
<div class="box">テキスト</div>.box{
/* lh : line-heightと同じ長さ */
height: 1lh;
font-size: 20px;
background-color: orange;
}
この場合、heightの高さは29px（行高さと同じ）になります。検証ツールで確認できます。
仮に、line-heightを1.4と指定している場合は、font-size 20px ✕ line-height 1.4 = 28px となるので、height 1lhの高さは28pxとなります。
.box{
/* lh : line-heightと同じ長さ */
height: 1lh; /* 20px x 1.4 = 28px */
font-size: 20px;
line-height: 1.4;
}
font-size:1lhと指定すれば、行高さと同じfont-sizeになります。
「rlh」は、ルート要素のlhになります。
例えばアイコン画像の高さを行高さと揃えたいときはlhを使ってみるのも一つの方法です。
.box{
display: inline-flex;
position: relative;
align-items: center;
column-gap: 10px;
}
.box::before{
content: "";
width: 1lh;
height: 1lh;
background-color: red;
flex-shrink: 0;
}
ここまで読んでくださりありがとうございました。