インライン画像タグの下に予期しない空白があるのはなぜですか?

画像タグの下の謎の空白が解決されました

最近 Web サイトのヘッダー画像を変更し、CSS 背景画像からインライン画像に切り替えました画像要素。画像は意図したとおりに拡大縮小されましたが、その下に予期しない 10 ピクセルのギャップが発生しました。

Chrome のインスペクターを使用しても原因を特定できなかった後、オンライン フォーラムに支援を求めました。提案される解決策の 1 つは、タイポグラフィック ディセンダーの概念に基づいています。

ディセンダーは、「j」、「g」、「p」、「y」など、テキスト内のベースラインより下に広がる文字です。デフォルトでは、画像などのインライン要素は、ディセンダーに必要なスペースを考慮したベースライン配置に従います。

解決策:

• 垂直に設定します。 align:bottom to the img tag: これにより、画像がコンテナの下部に配置され、白い部分が削除されます。 space.
• display: inline を display: block: に変更します。これにより、img タグがブロックレベルの要素に変換され、ベースラインの配置が削除されます。
• Adjustコンテナの line-height プロパティ: line-height を 0 に設定すると、ギャップ。
• コンテナに font-size: 0 を設定します。 これにより、ベースラインの位置合わせも排除されますが、子要素のフォント サイズを復元する必要がある場合があります。

以上がインライン画像タグの下に予期しない空白があるのはなぜですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。