为什么vertical-align不起作用

先看一段代码

<style>
    .title { margin:50px; color:blue; }
    .title span { font-size:24px; }
    .title span.en { font-size:14px; vertical-align:top; }
</style>
<div class="title">
    <span>博客园</span>
    <span class="en">/cnblogs</span>
</div>

结果如图，为什么我写了vertical-align:top;但是文字却没有对齐呢？

其实是因为vertical-align这个属性要和line-height搭配使用，因为vertical-align的对齐方式，是把元素的顶端与行中最高元素的顶端对齐，如图。

只要我元素的行高和文字大小一样，vertical-align就可以实现想要的效果了。

.title span.en { font-size:14px; line-height:14px; vertical-align:top; }

还有一种解决方法，就是直接将文字写到父元素中，这样子元素span会自动对齐父元素的上下边，因为行中参照物就是父元素本身。

<style>
    .title { margin:50px; font-size:24px; color:blue; }
    .title span.en { font-size:14px; vertical-align:top; }
</style>
<div class="title">
    博客园
    <span class="en">/cnblogs</span>
</div>