空のインラインブロック div に高さがあるのはなぜですか?

Inline-Block が空の Div の高さを設定する理由

空の div 要素に表示プロパティ「inline-block」が割り当てられている場合、予期せず高さが増加しますが、これは「display:block」では発生しない現象です。この一見矛盾した動作は、インライン ブロックの書式設定の固有の特性から生じています。

インライン ブロックでの行の高さの計算

要素をインライン ブロックに設定すると、行の高さの計算が変換されます。 inline-block は、テキストの基部を内部で揃えるのではなく、下端、上端、またはその両方を揃えます。

空の Inline-Block の行の高さ

空の inline-block 要素の場合、行の高さの計算は、要素に関連付けられたフォント メトリックから導出されます。ただし、テキスト コンテンツがないため、要素は親要素 (通常は本文) から継承するフォント サイズに基づいて基本的な行の高さを想定することになります。

空のインラインの修正-ブロックの高さ

継承された行の高さによって生じる不要な高さを排除するには、フォント サイズを明示的に 0 に設定するラッパー要素を使用して、行の高さの計算を効果的に無効にすることができます。

.wrapper {
    font-size: 0;
}

.wrapper div {
    font-size: medium;
}

更新: 空の Inline-Block の高さ

空の Inline-block 要素の高さについては公式ドキュメントがないことに注意することが重要です。しかし、観察によりパターンが明らかになりました。

最小行スペースの予約

インラインブロック要素は、コンテンツの有無に関係なく、最小の行スペースを予約しているようです。このスペースは、親要素から継承された行の高さに基づいています。

影響

この動作は、inline-block が本質的にコンテンツを予期し、デフォルトの行スペースを予約していることを示唆しています。たとえそれが空であっても。これは高さゼロの空行ボックスに関する W3 仕様と矛盾しますが、インライン ブロックの書式設定に特有の癖です。

以上が空のインラインブロック div に高さがあるのはなぜですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。