这个差距/利润来自哪里？

Question

使用此CSS和HTML，我会在<span> - 标记之上出现差距，我不知道为什么会发生这种情况：

CSS

<style>

    header > aside {
        float:                  left;
        font-size:              0;
        line-height:            0;
        white-space:            nowrap;
        border:                 1px solid green;

    }

    header > aside > span {
        display:                inline-block;
        height:                 19px;
        margin:                 0px 10px 0px 0px;
        padding:                5px 0px 0px 0px;
        opacity:                0.75;
        font-size:              9px;
        line-height:            9px;
        text-transform:         uppercase;
        color:                  #0fa1b4;
        border:                 1px solid red;
    }

    a.share {
        display:                inline-block;
        width:                  24px;
        height:                 24px;
        margin:                 -1px 0px 0px -1px;
        padding:                0;
        opacity:                0.45;
        background:             blue;
        font-size:              0;
        line-height:            0;
    }

</style>

HTML

<header>
    <aside>
        <span>Follow</span>
        <a class="share facebook" href=""></a>
        <a class="share soundcloud" href=""></a>
    </aside>
</header>

在行动中

http://jsfiddle.net/insertusernamehere/ZAVJJ/

我可以使用float解决它，但不知怎的，我想解决它没有。我想这很简单，我只是忽略了一些东西。但只有几个小时的睡眠，我无法弄清楚。 ：）

Answer 1

关于跨度的

vertical-align: top;可以解决问题。请参阅：http://jsfiddle.net/ZAVJJ/3/