line-heightのハーフ・レディングを打ち消す`calc((1em - 1lh) / 2)`をCSS変数に定義しておくとよい – TAKLOG

lhという単位に見慣れない方もいるかと思われますが、これは現在のline-heightと同じ長さを表す新しく登場した単位です。この例ではline-heightはフォントサイズの1.5倍なので、もし1remが16pxであれば1lhは24pxとなります。 この場合、行の高さと文字の高さの負の差は1em - 1lh、つまり16px - 24pxで-8pxです。それを片方の値を算出するために2で割ると-4pxになります。したがって、margin-block: calc((1em - 1lh) / 2)は、書式のブロック方向（横書き時：上下）にそれぞれハーフ・レディングの大きさ（今回では4px）分のネガティブマージンを設定するということになります。 従来の上下の余白を打ち消す方法との比較lhが登場するまではSassの@mixinなどを使用して以下のような関数を定義し、ハーフ・レディングを打ち消す方法

[nikutaiha]

css

[todays_mitsui]

“ハーフ・レディング”

[efcl]

text-box-trim & text-box-edgeを使わないハーフレディング

[mayumayu_nimolove]

外国翻訳すると崩れるってドヤってる人、今のwebデザイナーこんなやつばかりなの？稼げなくね？普通に金取るよ。

[tomoakinagahara]

このサイト、Mac版のSafariで見ると、レイアウトが壊れてる

[webstriver]

長年悩みだったこれ！

[Shinwiki]

lh...

[yarumato]

“lhという単位に見慣れない方もいるかと思われますが、これは現在のline-heightと同じ長さを表す新しく登場した単位です。個人的ポリシーとして、可能な限りline-height:1という指定は避けてる。”

[casm]

--の評価ってvarで呼び出したときなのか。なんとなく固定値になるイメージでいたからこの発想は無かった。応用効きそう。