HTML 中奇怪的 <img> 间隙
解决方案
在我短暂的开发生涯中，我遇到了很多挫折，最近我在开发自己的一个小项目时，又遇到了其中一个挫折。
正是使用 HTML<img>标签时出现的这种奇怪的漏洞，已经让我抓狂好几次了：
但这次不一样了！
解决方案
这个问题的推理和解决方法其实很简单，与方框中的文字有关。
等等，什么？图片里没有文字！
做好心理准备：
事实证明，img元素默认是行内元素。这意味着它们的流动方式与文本基本相同。因此，图像的底部边缘与通过属性指定的字体基线对齐font-size。
谜团解开了！以下是解决此问题的方法：
方案一
在您的图像上，设置vertical-align为bottom, top, text-top,text-bottom或middle
方案二
将图片设置为display: block（然后您还需要指定图片的宽度，否则所有内容都会显示在下一行）。
编辑：您也可以使用更现代的技术来解决此问题。例如，将display`to` 或flex`or` grid（还需要设置宽度），或者它们的内联对应项`and`inline-flex和`or`inline-grid也能解决问题，并且更加灵活display: block（应用于图像容器时也有效）。
方案三
不要完全使用图片（这样可以提升网站速度）
方案四
也许这正是你想要的！在文本流中将图像或小图标与基线对齐再简单不过了！
方案五
将图像容器（父级）设置为line-height: 0（当容器为元素时无效inline）或font-size: 0（始终有效）
方案 6
在图像上，设置float为right，left或inline-endinline-start
最终，所谓的“神秘图像间隙”其实并不神秘，但即便如此，这种简单的挫折最终会带来怎样的后果，仍然相当有趣。毕竟，我现在对行内元素的行为有了更透彻的理解。
如果这些还不够，这里还有一些资源：
- http://gtwebdev.com/workshop/gaps/image-gap.php
- https://developer.mozilla.org/en-US/docs/Images%2C_Tables%2C_and_Mysterious_Gaps
- 或者直接在你常用的搜索引擎里搜索“html img gap”或“img tag gap”，然后让成千上万个 Stack Overflow 上的问题慢慢浮现在你的脑海里。
感谢阅读 :)
编辑：
如果您想了解更多关于 HTML 布局的细节，
您还可以查看Mozilla 开发者网络上的HTML 参考资料。
延伸阅读：
文章来源：https://dev.to/christiankaindl/the-strange-img-gap-in-html