HTML＆amp; 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

您必须在display:block标记上使用<img>来消除差距。

默认情况下，<img>是内联元素，更确切地说是replaced inline element，因此默认情况下它的行为类似于

。

Answer 2

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

对您的图片使用display:flex或inline。

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