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

inline-block を使用すると、不思議なことに、非表示のコンテナー内の空の inline div 要素の高さが増加します。 display:block の動作とは対照的に、これはなぜ発生しますか?

Display:inline-block は要素に特定の書式設定を与えます:

• インラインレベルの書式設定: 要素は配置されます
• 行の高さの計算: 行の高さは、インライン要素では異なる方法で計算されます。インラインブロック要素の場合、マージンボックスの高さになります。通常のインライン要素の場合、これは 'line-height' プロパティです。

inline-block 要素が空の場合、フォントやテキストのコンテンツがなくても、基本的な行の高さが想定されます。この結果、空の状態にも関わらず、要素の高さは小さくても顕著になります。

この高さの問題を回避する回避策は、font-size:0 のラッパーを使用して、行の高さの計算を排除することです。

.wrapper {
    font-size: 0;
}

.wrapper div {
    font-size: medium;
   
}

更新: インライン ブロックの高さについて

当初の想定に反して、空のインライン ブロック要素の正確な高さは公式に文書化されていません。ただし、観察とテストによると、

• Inline-block は、継承された行の高さに基づいて最小の行スペースを予約しており、通常は によって決定されます。 element.
• この行スペースは、インラインブロックが空であっても存続し、理論的には CSS 仕様に従って高さゼロとして扱われる必要があります。

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