font-size:0px での奇妙な動作

Question

p には 2 つの要素 img span があります。

＃＃＃１。 p に font-size:0px

を設定します リーリー

car1.html として保存、実行結果は 0.

＃＃＃２。 p の 2 つの子要素に font-size:0px

を設定します。 リーリー

それを car2.html として保存すると、実行結果は 6px になります。

すみません、この動作はどう説明すればよいでしょうか?

Answer 1

これは img タグの font-size の影響です。 img 要素を囲む外側のレイヤーの p font-size が大きくなるほど、下マージンも大きくなります。インライン要素として、span は img ほど大きくないため、無視できます。 e1 と e2 の高さの差は、img と p の間のスペースです。 (もちろん、境界線をコメントアウトする必要があります。p font-size:0 の場合にのみ、e1-e2 が 0 に等しくなります)。

Answer 2

1 つ指摘してください: ケース 1 は 2 であるべきです

3 つのポイント:
1.p の高さは line-height でサポートされています。 line-height撑起。
2.默认情况下，line-height为normal(1.1-1.2由浏览器决定)，又是由font-size决定
3.offsetHeight还包括border2. デフォルトでは、line-height は normal (1.1 ～ 1.2 はブラウザによって決定されます) であり、font-size によって決まります。

3.offsetHeight には border も含まれます

それでは、見てみましょう: p设置font-size:0;此时，span继承font-size:0,但border上下和2px，所以，p的offsetHeight=内容高度+border,内容高度=img的offsetHeight+span的2px，所以e1.offsetHeight-e2.offsetHeight=2才对
情况2：在子元素上分别设置font-size:0;img和span的情况和上述一样，但是p的font-size默认为16px;line-height ケース 1: この時点で、親要素 p に font-size:0 を設定すると、span が継承されます。 font-size:0 ですが、border の上下は 2 ピクセルなので、p の offsetHeight = コンテンツの高さになります。 + border、content height=img の offsetHeight + span の 2px、つまり e1. offsetHeight-e2.offsetHeight= 2 は正しいです

ケース 2: 子に font-size:0 と span を設定します。上記と同じですが、p の font-size はデフォルトで 16px になります。 > 値はブラウザによって決定されるため、コンテンツの高さが変更され、最終的な値はブラウザによって決定されます。 🎜