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/