子节点的位置低于它应该的位置

Question

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

图像是我在chrome中看到的。

内部带有数字4的圆圈应该恰好位于橙色的框中。

圆圈元素没有边距样式。

您可以在http://sneezry.com

中找到实时的html代码

我希望你能理解我的意思：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>

Answer 1

如果将子项的显示样式设置为“block”而不是“inline-block”，则应删除额外的空格。