vertical-align:top 对齐

发布于
2017-05-31

帮我看下这个span的垂直对齐，为什么没有上对齐呢？

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>font-test</title>
    <style>
        * {padding: 0; margin: 0}
        p {font: bold  30px 'Microsoft JhengHei UI'; line-height: 50px; }
        span {vertical-align: top; font-size: .5em;}
    </style>
</head>
<body>
    <p> This is a test<span> span</span></p>
</body>
</html>

这是效果
图片描述