div内の画像には画像の下に余分なスペースがあります

Question

次のコードの div の高さが img の高さより大きいのはなぜですか?画像の下に隙間がありますが、パディング/マージンではないようです。

画像の下の隙間または余分なスペースは何ですか?

#wrapper {
  境界線: 1 ピクセルの赤一色。
  幅:200ピクセル;
}
画像 {
  幅:200ピクセル;
}

<div id="wrapper">
  <img src="http://i.imgur.com/RECDV24.jpg" />
</div>

Answer 1

この ブログ投稿 で提案されているもう 1 つのオプションは、画像を style="display: block;"

にスタイル設定することです。

Answer 2

デフォルトでは、画像は文字と同様にインラインでレンダリングされるため、a、b、c、d と同じ行に表示されます。

この行の下には、文字 g、j、p、q を入れるためのスペースがあります。

＃＃＃あなたはできる：＃＃＃

画像の

• vertical-align を調整します 他の場所 (例: middle) または
display
• をインラインではなくなるように変更します。

リーリー リーリー