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

HTML5 の画像に関する説明のないマージンの問題を修正する

HTML5 では、DIV 要素内に囲まれた画像に説明のないマージンが表示されるという予期せぬ問題が発生しました。 CSS 定義がないにもかかわらず、3 ピクセルの下マージンが発生します。この問題は、画像の高さと幅と DIV が両方とも 50 ピクセルに設定されている場合でも発生します。

この異常を解決するには、画像がテキスト内の文字のように動作し、その下には、「y」や「g」などの文字をぶら下げるためのスペースがあります。解決策は、CSS のvertical-align プロパティを利用して、そのようなスペースが必要ないことを示すことです。垂直方向の配置には任意の値を使用できますが、一般的な選択は「中間」です。

この修正を CSS に実装します:

img {
    vertical-align: middle;
}

このコードを組み込むことで、画像から不要な部分が失われます。下部マージンが減少し、期待どおりの動作が行われます。実際のデモについては、更新された jsFiddle: http://jsfiddle.net/fRpK6/1/ を参照してください。

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