css - 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; line-height:0px给div#wr.
在我看来，付出就font-size:0px足够了，因为line-height价值取决于font-size价值。

Answer 2

你可以float:left这样添加..

#wr>div{
    display:inline-block;
    background:black;
    font-size:0px;
    line-height:0px;
    margin:0px;
    padding:0px;
    float:left;
}