html - 子ノードは本来あるべき場所よりも下に配置されます

Question

http://i.stack.imgur.com/g0P1B.png

画像はクロムで見たものです。

内側に数字の 4 がある円は、周囲がオレンジ色のボックスにぴったり収まるはずです。

circle 要素は margin スタイルなしです。

ライブ HTML コードはhttp://sneezry.comにあります。

私の言いたいことを理解していただけると幸いです:S

親スタイル:

.disqus_count {
    margin: 2px 20px;
    height: 16px;
    line-height: 16px;
    display: inline-block;
}

子のスタイル:

.disqus_count a {
    display: inline-block;
    -webkit-border-radius: 8px;
    -moz-border-radius: 8px;
    border-radius: 8px;
    height: 16px;
    line-height: 16px;
    font-size: 12px;
    min-width: 10px;
    padding: 0 3px;
    text-align: center;
    color: white;
    background: gray;
    border: none;
}

HTML:

<span class="disqus_count"><a href="http://sneezry.com/2013/11/02/%e6%88%91%e4%b9%9f%e5%8a%a8%e5%8a%a8%e5%b0%8f%e6%8c%87%e5%a4%b4#disqus_thread">4</a></span>