コンテナーが非表示になっているときに、空のインライン ブロック要素の高さが高くなるのはなぜですか?

インラインブロックにより空の Div が非表示のコンテナーで高くなるのはなぜですか?

空の

が存在する場合、 display:inline-block が割り当てられていると、周囲のコンテナが非表示になっているにもかかわらず、不思議なことに高さを取得します。この動作は、display:block が使用されている場合には発生しません。

インライン ブロックと行の高さ

インライン ブロックの重要な側面の 1 つは、行の高さの計算に影響することです。 。インライン コンテキストでは、要素は下端、上端、またはテキスト ベースラインのいずれかによって位置合わせされます。インラインブロック要素はインライン書式設定の一部であり、ブロック要素のようなマージンボックスだけではなく、行の高さに基づいて高さが計算されます。

空のインラインブロックの高さの問題

inline-block 要素が空の場合、その要素はその親の基本的な行の高さを継承します。これは通常、フォントの特性に基づきます。インライン ブロックにコンテンツがない場合でも、割り当てられたフォントを使用して行の高さを設定しようとするため、高さがゼロ以外になります。

クイック修正: 行の高さをリセット

この高さの不一致に対処するには、ラッパーを使用して font-size: 0 を明示的に設定できます。これにより、フォント関連の計算が効果的に削除され、行の高さが削除されます。その後、高さの問題を引き起こすことなくコンテンツを表示できるように、インライン ブロック内でフォント サイズを復元できます。

更新: インライン ブロックの高さの決定

にもかかわらず広範な文書によると、空のインラインブロックの本質的な高さは依然として謎のままです。ただし、観察とテストを通じて、特定のパターンが明らかになりました。インラインブロック要素は、おそらく親から継承された行の高さに基づいて、最小の行スペースを予約しているようです。

要約すると、インラインブロックは特定のレイアウトに対して利点を提供しますが、空の場合は最小の高さを確保します。インラインブロックでは、不要なギャップを防ぐために追加の考慮が必要になる場合があります。

以上がコンテナーが非表示になっているときに、空のインライン ブロック要素の高さが高くなるのはなぜですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

このウェブサイトの声明

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。