CSS：display：内联块隐形填充

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

您可以像这样添加float:left ..

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

Answer 2

正如@pete在上述评论中建议的那样，将font-size:0px; line-height:0px提交给div#wr。
在我看来，只需font-size:0px即可，因为line-height值取决于font-size值。