インライン画像の下に余分な空白があるのはなぜですか?

画像タグの下の空白の謎を明らかにする

背景画像をインライン に置き換えると、

The Enigma of Descenders

テキストと同様に、画像などのインライン要素も次のように配置されます。 「j」、「g」、「p」（ディセンダ）などの文字がベースラインの下に広がるのに十分なスペースがあることを確認します。ベースライン。このデフォルトの動作により、マージンやパディングがない場合でも、画像の下に隙間が生じます。

空白の解決

この問題に対処するには、次の解決策を検討してください。

1. 垂直配置調整: 垂直配置の割り当て: 下画像タグに追加し、コンテナーの下部に揃えます。その他のオプションには、中央、上部、テキスト下部などがあります。
2. インラインからブロックへの変換: 画像の表示スタイルをインラインからブロックに変更し、ベースラインの配置を削除し、空白を削除します。 .
3. コンテナの行の高さの管理: コンテナの行の高さプロパティを調整して、画像の高さ。元のコード (現在は linkrot の対象) で例示されているように、これをゼロに設定すると、問題に効果的に対処できます。
4. コンテナーのフォント サイズ操作: コンテナーにフォント サイズ 0 を割り当てます。容器。必要に応じて、読みやすさを維持するために、子要素に合わせてフォント サイズを復元します。

これらの解決策のいずれかを実装することで、謎の空白をうまく排除し、シームレスな画像レイアウトを実現できます。

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