2

使用这个 CSS 和 HTML，我在<span>-tag 上方有一个空白，我不知道为什么会这样：

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/

我可以使用浮点数来解决它，但不知何故我想不用它来解决它。我想这很简单，我只是忽略了一些东西。但是只有几个小时的睡眠，我无法弄清楚。:)

4

1 回答 1

4

vertical-align: top;在跨度上就可以了。见：http: //jsfiddle.net/ZAVJJ/3/

于 2012-07-29T16:59:45.960 回答