ここに私の疑問があります。スパンである子を持つ親divがあります。どちらも line-height が 0 に設定されています。span の font-size は多数のピクセル (198px) に設定されています。
問題: div は高さを取得します。しかし、何から、0 であるスパンの行の高さから来なければならないのですか?
ティンカービンを設置しました。気になる方はチェックしてみてください。
これは少なくとも firefox と chrome で発生するため、ほぼ間違いなく標準化された動作です。
ノート！これは CSS の動作の疑いです。「問題を修正」することではなく、何が起こっているのかを知ることに興味があります。
前もって感謝します。
テキストにはまだサイズがあります。文字「F」は、div収まるように拡大しています。
仕様からの更新:
コンテンツがインライン レベル要素で構成されるブロック コンテナ要素では、「line-height」は要素内の行ボックスの最小の高さを指定します。
http://www.w3.org/TR/CSS21/visudet.html#line-height
したがって、行の高さは最小値の 0 としてのみ定義されており、明示的には 0 ではないため、ボックスの高さは実際には font-size から来ています。
私が思いついた答え：
仕様に裏付けられた最初の事実:
font-size よりも行の高さが大きい場合 (通常見られるもの) は非常に簡単です。行の高さを取り、font-size を引き、それを 2 で割ります。結果を「グリフ ボックス」の上部と下部の両方に適用します。それだけです。したがって、font-size が 14px で行の高さが 16px の場合:
16px - 14px = 2px 2px / 2 = 1px
「グリフ ボックス」の上に 1 ピクセルを追加し、その下に 1 ピクセルを追加します。ボックスの高さは 16px になり、予想どおり、親コンテナーの高さになります (この場合のように、行ボックスが 1 つしかないと仮定します)。
line-height が font-size よりも小さい場合 (私たちの場合)、事態はさらに複雑になります。font-size が 54px で line-height が 0 の場合に同じ式を使用してみましょう。
0-154px = -154px (仕様ではここで負の値が許可されているので問題ありません)
-154px / 2 = -77px
したがって、フォントのサイズは 154px です... さらに、知っておく必要があることがいくつかあります。フォントには、ベースラインから上部までの距離と、ベースラインから下部までの距離の両方があります。ものすごく単純。仕様では、最初の高さ (A) と 2 番目の深さ (D) を呼び出します。つまり、A+D = 上から下までの距離です。
ここで、私が質問で提示したケースで起こっていると思います。これは、仕様からではなく、「私のいじり」から結論付けたものです (そこに見つけることができなかったため)。
式を続けましょう。
line-height と font-size の差の結果を除算すると、-77px が得られました。
フォントサイズは 154px です。
ここで、上に -77px、下に -77px を追加する必要があります。マイナスを足すことは引くことなので、実際には 77px を引いています。
これは、図を使って簡単に説明できます。
ええ、それが高さの由来だと私は信じています。それは少なくともそれに関連しています。
はい、 はその内部要素の高さをとっています。定義された高さ/行の高さを正しく取得する場合は、ブロック要素として動作するように設定する必要があります ( display:block;)
また、行の高さ / 高さ :0 を使用して IE で要素を非表示にする場合、font-size も 0 に設定しない限り、IE は要素を折りたたみません。