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

テクノロジーカテゴリーの変更を依頼記事元:

www.tak-dcxi.com

208 usersがブックマークコメント

記事へのコメント7件

注目コメント
新着コメント

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

PostCSS

2024/06/03 リンク

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

2024/05/30 リンク

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

2024/05/30 リンク

webstriver 長年悩みだったこれ！

2024/05/30 リンク

Shinwiki lh...

2024/05/29 リンク

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

2024/05/29 リンク

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

2024/05/29 リンク

注目コメント算出アルゴリズムの一部にLINEヤフー株式会社の「建設的コメント順位付けモデルAPI」を使用しています

リンクを埋め込む

以下のコードをコピーしてサイトに埋め込むことができます

<iframe marginwidth="0" marginheight="0" src="https://b.hatena.ne.jp/entry.parts?url=https%3A%2F%2Fwww.tak-dcxi.com%2Farticle%2Fuse-line-height-trim-as-css-variable%2F" scrolling="no" frameborder="0" height="230" width="500"><div class="hatena-bookmark-detail-info"><a href="https://akarinohon.com/text/taketori.cgi/https://www.tak-dcxi.com/article/use-line-height-trim-as-css-variable/@__%E3%83%AD%E3%83%B3%E3%83%89%E3%83%B3">line-heightのハーフ・レディングを打ち消す`calc((1em - 1lh) / 2)`をCSS変数に定義しておくとよい – TAKLOG</a><a href="https://akarinohon.com/text/taketori.cgi/https://b.hatena.ne.jp/entry/s/www.tak-dcxi.com/article/use-line-height-trim-as-css-variable/@__%E3%83%AD%E3%83%B3%E3%83%89%E3%83%B3">はてなブックマーク - line-heightのハーフ・レディングを打ち消す`calc((1em - 1lh) / 2)`をCSS変数に定義しておくとよい – TAKLOG</a></div></iframe>

プレビュー

規約違反を報告

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

lhという単位に見慣れない方もいるかと思われますが、これは現在のline-heightと同じ長さを表す新しく登... 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などを使用して以下のような関数を定義し、ハーフ・レディングを打ち消す方法