DIV 内の HTML5 画像の下マージンが 3 ピクセルになるのはなぜですか? それを修正するにはどうすればよいですか?

HTML 5 の画像マージンの異常: 解決策が明らかに

HTML 5 では、DIV 要素内に囲まれた画像が説明のつかない表示を行うという特有の問題が発生します。 CSS スタイルを必須とするものがないにもかかわらず、3 ピクセルの下マージンが必要です。この異常は開発者を困惑させ、Web ページの意図したレイアウトを混乱させています。

この動作の根本的な原因は、画像がテキスト文字としてレンダリングされていることにあります。そのため、テキストのように機能し、その下に「y」や「g」などのぶら下げ文字を収容するためのスペースが残ります。これを修正するには、CSS のvertical-align プロパティを使用して、そのようなスペースが必要ないことを明示的に示す必要があります。

広範囲のvertical-align 値を使用すると、この問題に効果的に対処できます。ただし、見た目の美しさを考慮すると、「中間」が一般的な選択です。

img {
    vertical-align: middle;
}

を CSS に組み込むことで、DIV 要素内の画像から不要な 3 ピクセルの下マージンを削除できます。この解決策は異常を取り除き、Web ページの意図したレイアウトを復元します。

以上がDIV 内の HTML5 画像の下マージンが 3 ピクセルになるのはなぜですか? それを修正するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。