DIV 内の HTML5 画像の下マージンが謎の 3 ピクセルになることがあるのはなぜですか?

HTML5 画像の謎の 3 ピクセルのマージンを理解する

DIV 要素内の画像に奇妙な 3 ピクセルの下マージンが表示されるという予期せぬ現象に何人かのユーザーが遭遇しました。明示的な CSS マージンがないにもかかわらず。この異常をさらに詳しく調べるために、提供されたコード スニペットを調べてみましょう:

<div class="placeholder">
    <img src="/static/imghwm/default1.png" data-src="/haha.jpg" class="lazy" alt="">
</div>

display: table スタイルを .placeholder に割り当てるとき、追加された高さ (50 ピクセルではなく 53 ピクセル) は、画像が次のように動作していることを示唆しています。テキスト文字列内の文字。「y」や「g」などのぶら下がり文字のために下にスペースを残しておきます。

この問題を解決するには、 CSS プロパティのvertical-align を使用すると、そのようなスペースが必要ないことを示すことができます。提供されたコード ブロックで示されているように、vertical-align: middle を設定すると、追加の空白を残さずに画像を垂直方向に配置します。

ソリューションが実装された修正コードは次のとおりです。

img {
    vertical-align: middle;
}

この調整により、画像は DIV 要素内で適切に配置され、不可解な 3 ピクセルのマージンが解消されます。ユーザーは、追加された jsFiddle リンクで実際の例を参照できます:

http://jsfiddle.net/fRpK6/1/

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