明示的な CSS がないにもかかわらず、HTML5 画像の下マージンが 3 ピクセルになるのはなぜですか?

HTML 5 画像の異常: 説明できない下マージンの問題

HTML 5 を使用すると、画像が DIV 要素内でラップされるという厄介な問題が発生する可能性があります不可解な 3 ピクセルの下マージンが表示されます。この異常は、CSS に明示的なマージン定義がないにもかかわらず存続します。たとえば、次の HTML 構造について考えてみましょう。

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

.placeholder DIV が display: table スタイルを持っている場合、画像のサイズは 50x50px のままです。ただし、.placeholder DIV は不思議なことに垂直方向に 53px まで拡張されます。この予期しない動作は、解決策を求めている多くの開発者を困惑させています。

解決策: 垂直方向の配置

この異常の根本原因は、画像がテキスト文字として扱われることにあり、その結果、その下の不要なスペースは、「y」や「g」などの文字のディセンダが占めるスペースに似ています。これを解決するために、CSS のvertical-align プロパティにより、そのようなスペースが割り当てられないようにします。事実上、vertical-align には任意の値で十分ですが、中央が一般的な選択肢です。

img {
    vertical-align: middle;
}

このソリューションを実装すると、3 ピクセルの下マージンが効果的に削除され、画像表示の問題が解決されます。更新された jsFiddle に示されているように、画像とその周囲の DIV は、画像の下に独特の空きスペースを持たずに、意図したサイズを表示するようになりました。

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