关于在一个大盒子里消除img和div盒子之间空隙的办法和原因分析

在网上学习CSS过程中，发现了在一个大盒子div里，img和div之间会有一个小缝隙，原因为img的vertical-align属性为默认的baseline，将其改为top /middle /bottom即可。
原因分析：
要解决这个问题，首先要对vertical-algin的属性：top，middle，baseline，bottom有一定的认识，它们的作用分别为元素放置在父级元素的顶部，中间，基线，以及底部上。
将通过以下例子，来获得更好的认知：
top：

<style>
.bigBox  {
			margin: 0 auto;
			background-color: pink;
			height: 400px;
			width: 400px;
		}
		.littleBox {
			background-color: blue;
			height: 100px;
			bottom: 0;
		}
		img {
			vertical-align: top;
		}
</style>
<div class="bigBox">456
		<img src="speedtime.png" height="200" width="100" alt="">fffyyy
		<div class="littleBox" >123</div>		
</div>

结果为：

middle同理，此处不再演示，关键为以下两个属性：
baseline：

bottom：

baselin图中，红色框框部分即为img和div之间的小空隙，图片以字符f或者456的最低端（基线）作为图片的底部，而基线之下还有底线，即字符y的最低端作为底线，所以img和div之间存在着小空隙。
而bottom图中，图片以y的最低端（底线）作为图片的底部，进而消除了中间的小空隙。
而top以及middle的原理也是一样的，只要使图片的放置位置不是在基线上，就能消除掉小空隙。

css自学小白，这是我在一次作业当中发现的问题，结合了一下其他人的解法，以及自己的一些让我能接受的做法，而写了这么一篇文章。可能这中间我有些会理解不到位，还请各位大佬指出。

顺便提出新疑问：当属性为top时，为何f的顶部不是紧贴着盒子的顶部？
暂定思路：存在着比f顶部更高的字符，其空位是为尚未用到的某个字符而准备的。