css中vertical-align属性默认值baseline为什么是图中所示的位置，而不是其他位置？

Question

<div>
Writing
<img id="img1" src="img1.jpg" />
<span id="span">span元素</span>
<img id="img2" src="img2.jpg" />
</div>
div{
border:1px solid black;/给父元素添加一个边框，便于辨认/
width:1000px;
height:200px;
font-size: 50px;/设置大号字体，便于比较/
}

img#img1{
width:150px;
}

span{

display: inline-block;/注意这里的inline-block/
width:250px;
height:80px;
background-color: yellow;/给span元素设置一背景色，便于辨认/
}

Answer 1

就是这么规定的 英文小写字母的下面。可以参照英文四线三格。
可参考链接然后其他的对齐方式，根据不同元素不是很好理解，以前有浏览器实现差异，现在不大清楚。

评论补充：

两种去除方法：
1.父元素font-size:0;
2.
<div>
    <span></span>
    <span></span>
</div>
改写为
<div><span></span><span></span></div>
或用注释
<div><!--
    --><span></span><!--
    --><span></span><!--
--></div>
就是不要留有空格和换行符这些'字符'