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，因此默認情況下它的行爲如同一個。

Answer 2

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

使用display:flex或inline爲你的形象。

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