font-size对展示的影响

实例：

　　<head>
       <style type="text/css">
           span{display: inline-block;height: 15px; line-height: 15px;}
           .span1{ 3px;background-color: #ccc;}
           .span2{background-color: #ccc; font-size: 12px;}
           .span3{ 2px; background-color: #ccc;}
       </style>
   </head>
   <body>
       <span>
           <span class="span1"></span>
           <span class="span2">aaaa</span>
           <span class="span3"></span>
       </span>
   </body>

当设置font-size之后，原本垂直居中的三个inline-block的元素，会变的不再垂直居中。

解决方案：

　　1、span{display: inline-block;height: 15px; line-height: 15px; float:left;}

　　2、.span1{ 3px;background-color: #ccc; vertical-align: middle;}
.span2{background-color: #ccc; font-size: 12px; vertical-align: middle;}
.span3{ 2px; background-color: #ccc; vertical-align: middle;}

疑问：

　　font-size为什么会对排列展示产生影响？