CSS: display:inline-block 不可见填充

Question

http://jsfiddle.net/QYtnL/

<div id="wr">
    <div></div>
    <div></div>
    <div></div>
</div>

#wr {
    background:red;
    text-align:center;
}
#wr > div {
    display:inline-block;
    background:black;
    font-size:0px;
    line-height:0px;
    margin:0px;
    padding:0px;
}

如何删除烦人的填充，使所有 div 高度为 0px？如果我要删除 display:inline-block; ，它就不见了，但我需要 inline-block。

Answer 1

正如@pete 在上面的评论中所建议的那样，给 font-size:0px;行高:0px 到 div#wr。
在我看来，只提供 font-size:0px 就足够了，因为 line-height 值取决于 font-size值(value)。