空のインラインブロック要素によってギャップが生じるのはなぜですか?

行の高さの計算とインライン ブロックの効果

display:inline-block の重要な側面の 1 つは、行の高さの計算に影響します。インライン コンテキストでは、行の高さはテキストのベースラインを中心に設定されます。インライン ブロック要素の場合、行の高さはフォントのメトリックによって決まります。

コンテンツなしの高さの測定

空のインライン ブロック要素にはフォント関連の寸法がないため、問題が発生します。ただし、親要素のデフォルトの行の高さを継承しているため、ギャップが表示されます。

クイックフィックス: 行の高さの削除

この問題を解決するには、ラッパー要素を次のようにします。ゼロのフォント サイズで導入され、行の高さが効果的に削除され、ギャップがなくなりました。 inline-block 要素内のフォント サイズをリセットすると、不要なスペースを作成せずにコンテンツを表示できるようになります。

更新: ドキュメントのギャップを埋める

広範な調査にもかかわらず、高さを明示的に定義している公式ドキュメントはありません。

簡単な説明

インライン ブロック要素は、コンテンツを予期しているかのように動作します。実際のコンテンツがない場合でも、継承された行の高さに基づいて最小行スペースが予約されます。この動作は、明示的に文書化されていませんが、実験を通じて観察された一般的なパターンです。

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