私の HTML5 画像の下マージンが謎の 3 ピクセルになっているのはなぜですか?

HTML5 の謎: 予期せぬマージンを示す画像

Web サイトを HTML5 に変換するときに発生する特有の問題を考えてみましょう。予期せぬことに、CSS にはそのようなマージンがないにもかかわらず、DIV 要素内に囲まれたすべての画像に不可解な 3 ピクセルの下マージンが表示されました。広範な調査にもかかわらず、この異常の原因は依然としてわかりません。

この問題の兆候は、画像に 50x50 ピクセルのサイズが割り当てられ、含まれる DIV 要素 (

) がディスプレイで構成されていたときに明らかになりました。 ： テーブル。興味深いことに、.placeholder の高さの寸法は疑わしく 53 ピクセルに増加しました。

謎を解く

この複雑な動作の解決策は、画像の固有の特性を理解することにあります。 HTML。デフォルトでは、画像はテキスト文字と同様に動作するため、その下に「y」や「g」などの文字の仮想的な「尾部」用のスペースが確保されます。この問題を修正するには、CSS プロパティvertical-align を使用して、この追加の垂直方向のスペースがないことを示すことができます。

実装

不要な下マージンを削除するには、次の CSS ルールを組み込むだけです:

img {
    vertical-align: middle;
}

vertical-align の値を指定することで、画像の垂直方向が調整されます。親要素内の配置が調整され、予約されたスペースが効果的に中和されます。

視覚的検証

このソリューションは、更新された jsFiddle でエレガントに実証されています: [リンクが提供されています]。

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