HTMLとCSS - なぜこの画像の下のギャップを取り除くことができないのですか？

Question

私は本当にここで苦労しています

私は怒っていると思います。私は何時間もこの問題を解決しようとしてきましたが、私はそれをベアボーンに取り除きました！私はここで見逃している私は、このコード私の正気を保存してください

https://jsfiddle.net/k2gjjk8s/

<div style="border:1px solid #000">hi</div> 
<img src="assets/images/banner-top-beneath.jpg" style="width:600px;height:300px;margin:0;padding:0;border:1px solid #000"> 
<div style="border:1px solid #000">hi</div> 
<div style="border:1px solid #000">hi</div> 

に置かれた任意の画像の下の余白/ギャップ/スペースは、

ありますか？

Answer 1

<img>タグにはdisplay:blockを使用する必要があります。

デフォルトでは、<img>はインライン要素、より正確にはreplaced inline elementです。したがって、デフォルトでは1のように動作します。

Answer 2

https://jsfiddle.net/k2gjjk8s/1/

あなたのイメージのためにdisplay:flexかinlineを使用してください。

https://css-tricks.com/snippets/css/a-guide-to-flexbox/