原因
因为后面的盒子没有任何字符，此时它的基线就是它的底边缘，第一个盒子有文字，所以该盒子的基线就是文字的基线，二者基线对齐，现成如此效果。
解决方法
只要给这个div加一个vertical-align: top;,就可以将它的基线放到最上面和后面的div保持在同一水平线上
拓展
vertical-align 用来指定行内元素（inline，inline-block）或表格单元格（table-cell）元素的垂直对齐方式。
常用的对齐方法:
-
baseline (以及 sub, super, text-top, text-bottom,
, )
使单元格的基线，与该行中所有以基线对齐的其他单元格的基线对齐。 -
top
使单元格内边距的上边缘与该行顶部对齐。 -
middle
使单元格内边距盒模型在该行内居中对齐。 -
bottom
使单元格内边距的下边缘与该行底部对齐。