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

インラインブロックの高さの難問: 行の高さの影響を理解する

コンテキスト

空の

要素にインラインブロック表示が与えられると、その親コン​​テナー内で予期しない高さが取得されるようです。この現象はdisplay:blockでは発生しません。この特殊性により、開発者は「なぜ inline-block がこのギャップを引き起こすのか?」と疑問に思っています。

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

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

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

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

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

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

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

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

簡単な説明

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

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

if for while default this display issue

声明：

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