html - 子节点的位置低于应有的位置

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>

最佳答案

如果将孩子的显示样式设置为“阻止”而不是“内联阻止”，则应该删除多余的空间。