CSS を使用して画像の下の空白を数ピクセル消去する方法の詳細な説明

最近、友人が私に質問をしました。

ページをレイアウトすると、画像の下に 1 ～ 2 ピクセルの空白があることに気付きました。どうすれば削除できますか?

これはブラウザの設計上の問題です。 img は本来インライン要素ですが、幅と高さを使用することができます。親要素で高さを設定していない場合に、子要素の高さで計算した高さを親要素に与えると 3px の隙間ができるなどの問題が発生します。

画像の下の隙間をなくす方法1

画像{display:block;}

方法2

画像{垂直配置:上;}

top 値に加えて、text-top | middle | bottom | text-bottom に設定したり、特定の <length> 値や <percentage> 値に設定したりすることもできます。

方法3

#qdxw{フォントサイズ:0;行の高さ:0;}

#qdxwはimgの親要素です

要約する

これで、CSS を使用して画像の下の空白スペースを数ピクセル消去する方法についての記事は終了です。CSS を使用して画像の下の空白スペースを数ピクセル消去する方法の詳細については、123WORDPRESS.COM の以前の記事を検索するか、以下の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。