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

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

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

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

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

.wrapper {
    font-size: 0;
}

.wrapper div {
    font-size: medium;
   
}

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

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

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