フォント サイズを小さくすると高さが高くなるのはなぜですか?

Question

特定の行高さのブロックがあり、そこに ::before 疑似要素を含むコンテンツを挿入します。

リーリー

これは非常にうまく機能します。ただし、コンテンツのフォント サイズを小さくすると

リーリー

ブロックは実際には高くなります。何故ですか？

リーリー リーリー

上の行ではフォント サイズが変更されていませんが、下の行ではフォント サイズが変更されています。

今、考えられる解決策は、疑似要素の line-height を 0 に設定することであることがわかりました。または 1em まで。あるいは normal まで。どうしたの？フォント サイズを .6em に設定すると、line-height が奇妙な値に設定されますか?なぜ？

PSこれは重複のように見えるかもしれませんが（右側のリストを参照）、これまでに読んだ回答のどれも、line-height:normalを設定することで問題が解決する理由を説明していません。行の高さを暗黙的により大きな値に設定する何かが起こっているに違いありません。これが私が知りたいことです。

Answer 1

編集: この質問は最近新たに注目を集めているため、より役立つようにここで更新されました。

---

Alohci の解決策は正しいですが、グラフィックに興味がある人にとっては完全に明確ではないかもしれません。

それでは、写真を使って解決策を説明させてください。

まず、line-height は計算されたサイズを継承するため、em 単位で指定されていますが、子はピクセル単位の値を継承します。たとえば、フォント サイズが 20px で行の高さが 3em の場合、フォント サイズが異なる子孫であっても (独自の行を指定しない限り)、行の高さは 60 ピクセルになります。身長） 。

次に、フォントに 1/4 ディセンダがあると仮定します。つまり、20 ピクセルのフォントの場合、ディセンダーは 5 ピクセル、アセンダーは 15 ピクセルになります。次に、以下に示すように、残りの行の高さ (この場合は 40 ピクセル) をベースラインの上下に均等に分割します。

小さいフォント (0.6em または 12 ピクセル) のブロックの場合、行の高さの残りの量は 60-12 または 48 ピクセルで、これも均等に分割されます: ベースラインの上に 24 ピクセル、下に 24 ピクセル。

次に、同じベースライン上で 2 つのフォントを組み合わせると、行の高さが同じように分割されていないことがわかります。そのため、両方の行の高さが 60 ピクセルであっても、含まれるブロックの合計の高さは増加します。

これですべてが説明されることを願っています!

Answer 2

.lorem、.ipsum、.dolor、および .sit ボックスの高さは、それらを含む単一行ボックスの高さです。

各行ボックスの高さは、行の柱のベースラインより上の高さと、行内のテキストのベースラインより下の最大の高さの最大値です。柱と文字がベースラインに揃っているからです。

明確にするために、以下の高さ (em 単位) はコンテナ全体 (つまり、body 要素) のフォント サイズを指します。

.ipsum (フォント サイズ 1em) では、柱とテキストのベースライン上の高さは 1em (上半分の先頭) 13/16em (ライザー、おおよそ)、ベースラインの下の高さは 1em (半行の先頭) 3 /16em (下り部分、約）1em（後半手前）、合計3em。

.sit (フォントサイズ 0.6em) では、ベースラインからの高さは最大 [1em (上半分の行頭) 13/16em (立ち上がり部分、柱部分)] と [1.2] em (上半分の行頭) です。 ）0.6×13/16em（立ち上がり部分、約）、ベースラインからの高さは[1em（下半分先頭）3/16em（立ち上がり部分、下降部分最大、約）]と[1.2em] (下半分の先頭) テキストの場合は 0.6 x 3/16em (下位部分、約)]。

これを評価して小数に変換すると、ベースラインより 1.8125em 上、ベースラインより 1.3125em 下、合計 3.125em となり、.ipsum より 3em 大きくなります。