「display: inline-block」が非表示の Div の上にギャップを作成するのはなぜですか?

Inline-Block が非表示の Div に高さを加える理由

• 要素を含む要素が非表示になっている場合、要素の上に予期しないギャップが発生する可能性があります。この現象は、display: block.
なぜこれが起こるのか?

display: inline-block では行の高さの計算を変更します。インライン書式設定コンテキストでは、インラインブロック要素の高さは、その 'line-height' プロパティに基づきます。空のインラインブロック要素の場合、目に見えるコンテンツがない場合でも、これは基本的な行の高さに変換されます。ギャップの背後にある理由したがって、空のinline-block は、通常は から継承された line-height に基づいて最小行スペースを予約します。要素。この予約されたスペースは、コンテナが表示されていない場合、要素の上のギャップとして現れます。クイック修正このギャップをなくすための簡単な解決策は、インラインをラップすることです。明示的に font-size: 0 を設定するラッパー内の -block 要素。これにより、フォントと行の高さがなくなり、空の inline-block の高さがなくなります。Update空の inline-block 要素の高さは、公式ドキュメントでは明示的に定義されていません。ただし、テストに基づいて、次のように理解できます:空のスペース: インライン ブロック要素は、潜在的なコンテンツ用の行ボックスを予約します。Inherited Line-Height: この行ボックスは、 を含む親要素から継承された行の高さに基づいています。 element.最小行スペース: 空のインライン ブロックはフォーマット目的で技術的に存在しないにもかかわらず、それでも最小行スペースが確保されています。

以上が「display: inline-block」が非表示の Div の上にギャップを作成するのはなぜですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。