内部に画像が入った要素の下に非常に奇妙な空白が現れる

Question

さて、私はこのサイトを設計しています。ここでは、この単純な要素のHTMLマークアップです：

http://thegrantmag.com

それはコンテンツ領域の下に、画面の下部にある画像ボックスです。それの下に空白の帯があります。私は通常、CSSのトラブルシューティングにはかなりいいですが、これは私にはあります。私は要素インスペクタですべての要素を削除しようとしました。そのイメージが存在する限り、下に空白の細い帯があります。

更新：imgを削除してdivに置き換えようとしました。そこに何が入っても要素の下には常にいくつかの余分なピクセルが作成されます。

Answer 1

画像にvertical-align:topを定義するとよいでしょう。

img{ 
vertical-align:top; 
} 

Answer 2

画像をdisplay: blockに設定してください。

Answer 3

画像のCSSにdisplay:blockまたはfloat:leftを追加します。

これが役立つかどうかを確認してください。