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/

float を使用して解決できましたが、どういうわけかフロートなしで解決したいと考えています。私はそれがかなり単純だと思います、そして私は何かを見落としているだけです。しかし、ほんの数時間の睡眠では、それを理解することはできません. :)

4

1 に答える 1

4

vertical-align: top;スパンでトリックを行います。参照: http://jsfiddle.net/ZAVJJ/3/

于 2012-07-29T16:59:45.960 に答える