アンカー タグ内の画像の下に余分な空白が表示されるのはなぜですか?

アンカー タグの下部の空白の課題

画像を含むアンカー タグがアンカー タグの下部よりわずかに高く表示される、不可解な空白の問題に遭遇しました。その内容。マージンとパディングの両方をゼロに設定しているにもかかわらず、画像の下に 3 ピクセルのギャップが生じます。この不一致により、周囲の div 境界線内で意図した視覚的な配置が妨げられます。

原因を理解する

問題は CSS フォーマットにあります。デフォルトでは、画像はインラインで表示され、書かれたベースライン上のテキスト文字に似ています。残念ながら、この配置にはディセンダー文字 (j、g、y、p など) 用に予約された追加の空白が含まれています。

空白の解決

この問題を修正するには、調整してくださいCSS を使用した垂直方向の配置:

img {
  vertical-align: bottom;
}

vertical-align:bottom を設定すると、画像を次のように配置します。テキスト行の下部に配置され、空白のギャップが効果的に排除されます。これで、画像と境界線がシームレスに配置され、希望の視覚効果が得られます。

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