实例：
<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为什么会对排列展示产生影响？