Question

With this CSS and HTML I get a gap above the <span>-tag and I don’t know why this is happening:

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>

In action

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

I could solve it using float, but somehow I want to solve it without. I guess it’s pretty simple, and I’m only overlooking something. But with just a few hours sleep, I can’t figure it out. 🙂

Answer 1

vertical-align: top; on the span does the trick. See: http://jsfiddle.net/ZAVJJ/3/