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

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

如果您将孩子的显示样式设置为“块”而不是“内联块”，它应该删除额外的空间。